accordionmenuCSS
/* Accordion Menu powered by www.menucool.com */ /* ##### Top level items #####*/ #acdnmenu { /* Note about height: Set "height:auto;" if flexible height is required. A fixed height is prefered as content below the menu won't be pulled down/up when the menu is expanding/collapsing. */ height: 300px; width: 240px; } #acdnmenu ul.top { padding-left:0; } #acdnmenu div.heading, #acdnmenu a.link { padding:8px; padding-left:24px; text-align:left; font:normal 12px Verdana; color:#DCB; text-decoration:none; outline:none; } #acdnmenu div.current, #acdnmenu div:hover, #acdnmenu a.link:hover, #acdnmenu div.current a.link { color:#DCB; font-weight:normal; text-decoration:none; } /*Top level link without children*/ #acdnmenu a.current, #acdnmenu a.current:hover { color:#FFF; text-decoration:underline; } /* arrow image for the top headings */ #acdnmenu div.arrowImage { width:12px; height:12px; top:9px; left:4px; /* Changing it to "right:8px;" will position the arrow image to the right */ background-image:url(arrows.gif); background-position:0 0; } #acdnmenu div.current div.arrowImage { background-position:0 -12px; } #acdnmenu li.separator { border-top:none; border-bottom:none; } /* ##### Sub level items #####*/ #acdnmenu ul.sub { padding-left:20px; /*This determines the hierarchical offset*/ } #acdnmenu ul.sub div.heading { text-align:left; font:normal 12px Arial; padding:5px; padding-left:20px; color:#DCB; background:none; } #acdnmenu ul.sub div.heading a { color:#DCB; } #acdnmenu ul.sub div.current { color:#DCB; background:none; } #acdnmenu ul.sub a.link { font:normal 11px Arial; color:#DCB; padding:5px; padding-left:20px; text-decoration:none; background:none; } #acdnmenu ul.sub a.link:hover, #acdnmenu ul.sub a.current, #acdnmenu ul.sub div.heading a:hover, #acdnmenu ul.sub div.heading a.current { color:#FFEEEE; text-decoration:underline; background:none; } #acdnmenu ul.sub div.arrowImage { width:12px; height:12px; top:6px; left:6px; background-image:url(arrows.gif); background-position:0 -24px; } #acdnmenu ul.sub div.current div.arrowImage { background-position:0 -36px; } /* ##### Followings usually don't need modification ###### */ /*Hack the font-size:0 bug for IE6 */ #acdnmenu, #acdnmenu ul { display:block; font-size:0px; line-height:0px; } #acdnmenu li {font-size:12px; line-height:16px;} #acdnmenu:after {content:'.';height:0;clear:both;display:block;visibility:hidden;} /*Hack for IE6-7*/ #acdnmenu ul, #acdnmenu li, #acdnmenu div.heading, #acdnmenu a.smLink, #acdnmenu div.description {*zoom:1;} #acdnmenu li {*float:left;*width:100%;} #acdnmenu ul { position:relative;/*!*/ overflow:hidden; padding:0;margin:0;list-style-type: none;padding-left:10px; } #acdnmenu>ul{visibility: hidden;} #acdnmenu li {padding:0;margin:0;} #acdnmenu div.heading, #acdnmenu div.current { position:relative; cursor: pointer; } #acdnmenu div.arrowImage {position:absolute; overflow:hidden;}