1) Script Title: Glossy Accordion Menu script
2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...enu-glossy.htm
3) Describe problem: I've installed this script on a few sites and haven't had any issues with it before. Now I've installed it on a new site we're developing and for some reason I can't get the submenu to be visible. Here's the link to the development site http://www.cmswebsolutions2.com/eco. The expand/collapse works and the you can click on the links in the submenu but you just can't see them. I've tried using the styles from the sample and it doesn't help either.
html:
css:Code:<div class="glossymenu"> <a class="menuitem active" href="index.php">Home</a> <a class="menuitem" href="about-ecobusiness.php">About EcoBusiness</a> <a class="menuitem" href="business-stories.php">Business Stories</a> <a class="menuitem" href="joining.php">Joining</a> <a class="menuitem" href="events-workshops.php">Events & Workshops</a> <a class="menuitem" href="sponsors.php">Sponsors</a> <a class="menuitem" href="web-links.php">Web Links</a> <a class="menuitem submenuheader" href="#">Tools & Resources</a> <div class="submenu"> <ul> <li><a href="lunch-learn.php"></a></li> <li><a href="checklists.php"></a></li> <li><a href="financial-incentives.php"></a></li> <li><a href="green-pages.php"></a></li> </ul> </div> <a class="menuitem" href="library.php">Library</a> <a class="menuitem" href="contact.php">Contact Us</a> </div>
Any idea what might be going on? It's a mystery to me.Code:/* accordion menu */ .glossymenu { padding: 0; width: 158px; /*width of menu*/ } .glossymenu a.menuitem { color: #FFF; display: block; position: relative; /*To help in the anchoring of the ".statusicon" icon image*/ width: auto; padding: 4px 0; padding-left: 10px; text-decoration: none; } .glossymenu a.menuitem:visited, .glossymenu .menuitem:active{ color: #FFF; } .glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/ position: absolute; top: 5px; right: 3px; border: none; } .glossymenu a.menuitem:hover{ background: #458C31; } .glossymenu div.submenu{ /*DIV that contains each sub menu*/ background: #FFF; } .glossymenu div.submenu ul{ /*UL of each sub menu*/ list-style-type: none; margin: 0; padding: 0; } .glossymenu div.submenu ul li{ color: #458C31; border-bottom: 1px dotted #458C31; } .glossymenu div.submenu ul li a{ display: block; color: #458C31; text-decoration: none; padding: 2px 0; } .glossymenu div.submenu ul li a:hover{ background: #458C31; color: #FFF; }



Reply With Quote



Bookmarks