Hello all, hope your having a great day!
Recently, I installed the free accordian menu addon onto my site (bigjmart.com). The addon works great and I recommend it to anyone who wants a “cool” menu look however, it only allows for 2 subcategories… what if someone has more (I have root category → sub category → sub-sub category → sub-sub-sub category)?
Here is my code located in my [color=#000000][font=Tahoma][size=3]/[/size][/font][/color]skins[color=#000000][font=Tahoma][size=3]/[/size][/font][/color]my_skin[color=#000000][font=Tahoma][size=3]/[/size][/font][/color]customer[color=#000000][font=Tahoma][size=3]/[/size][/font][/color]addons[color=#000000][font=Tahoma][size=3]/[/size][/font][/color]accordion_menu[color=#000000][font=Tahoma][size=3]/[/size][/font][/color]css:
/* CSS Document */
.arrowlistmenu{
width: 160px;
}
.arrowlistmenu .menuheader{
font-family: Tahoma,Arial,Helvetica,sans-serif;
font-size: 11px;
color: #2d2d2d;
background: url(arrowbullet.png) no-repeat center left;
padding: 6px 0 6px 19px;
cursor: hand;
cursor: pointer;
}
.arrowlistmenu .menuheader a{
color: #014EAD;
font: bold 12px Verdana,sans-serif;
margin-left: -14px;
}
.arrowlistmenu .menuheader a:hover{
text-decoration:underline;
}
.arrowlistmenu h3 a{
font-color: #2d2d2d;
text-decoration: none;
}
.arrowlistmenu ul.h-sep {
list-style-type: none;
background: transparent url('categories_delim.gif') repeat-x scroll center center;
font-size:1px;
height:1px;
line-height:1px;
padding: 0;
margin: 0;
}
.arrowlistmenu .openheader{
text-decoration: none;
}
.arrowlistmenu ul{
list-style-type: none;
margin: 0;
padding: 0;
}
.arrowlistmenu ul li{
padding-bottom: 2px;
}
.arrowlistmenu ul li .opensubheader{
font-family: Tahoma,Arial,Helvetica,sans-serif;
font-size: 11px;
color: #1a75cf;
margin-left: -5px;
background: url(arrowbullet.png) no-repeat center left;
padding: 4px 0 4px 19px;
cursor: hand;
cursor: pointer;
}
.arrowlistmenu ul li .closedsubheader{
font-family: Tahoma,Arial,Helvetica,sans-serif;
font-size: 12px;
color: #f88017;
margin-left:5px;
background: url(arrowbullet.png) no-repeat center left;
padding: 4px 0 4px 19px;
cursor: hand;
cursor: pointer;
}
.arrowlistmenu ul li a{
color: #1a75cf;
display: block;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 15px;
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 11px;
}
.arrowlistmenu ul li a:hover{
text-decoration:underline;
}
Can anyone help me so I can have 4 subcategories shown. You can try it on my website, bigjmart.com and see if you can mess with the css code and get it to work.
Any help would be great, and it seems like a lot of other people are having the same issue when I researched it. Thanks.