Hello All, I'm working on a new site and I'm having problems getting the drop down menus to work. Here's my code before I get into the problem: HTML <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta name="description" content="The official site of Hollywood's Magical Island Catalina."> <meta name="keywords" content="greg reitman, the green producer, hollywood, los angeles, blue water entertainment, green tips, fields of fuel, hollywoods magical island catalina, blue water company, los angeles producer, la producer, rooted in peace, stars cars guitars, on the green carpet, the environmentalist, green correspondent"> <title>Hollywood's Magical Island Catalina | a GREG REITMAN film</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <div id="page"> <div id="wrap"> <div id="header"> <a href="index.html" border="0" title="Home"><img src="images/logo.jpg" /></a> <ul id="nav"> <li id="nav-home"><a href="index.html">HOME</a></li> <li id="nav-about"><a href="#">ABOUT</a> <ul> <li class="sub"><a href="#">SYNOPSIS</a></li> <li class="sub"><a href="#">TEAM</a></li> <li class="sub"><a href="#">CONTACT</a></li> </ul> </li> <li id="nav-screening"><a href="#">SCREENING</a> <ul> <li class="sub"><a href="#">BOOKINGS</a></li> </ul> </li> <li id="nav-journal"><a href="#">JOURNAL</a> <ul> <li class="sub"><a href="#">MEMORIES LOG</a></li> </ul> </li> <li id="nav-media"><a href="#">MEDIA</a> <ul> <li class="sub"><a href="#">PHOTOS</a></li> <li class="sub"><a href="#">ARTICLES</a></li> <li class="sub"><a href="#">VIDEO</a></li> <li class="sub"><a href="#">RADIO</a></li> </ul> </li> <li id="nav-partners"><a href="#">PARTNERS</a> <ul> <li class="sub"><a href="#">PARTNERS</a></li> <li class="sub"><a href="#">AFFILIATES</a></li> </ul> </li> </ul> </div><!--END nav--> </div><!--END header--> <div id="content"> <div id="crest"></div><!--END crest--> <div id="flash"> </div><!--END flash--> <div id="trailer"> <div id="movie"> <OBJECT classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' width="320" height="255" codebase='http://www.apple.com/qtactivex/qtplugin.cab'> <param name='src' value="hmi-trailer-high.mov"> <param name='autoplay' value="true"> <param name='controller' value="true"> <param name='loop' value="true"> <EMBED src="hmi-trailer-high.mov" width="320" height="255" autoplay="false" controller="true" loop="true" pluginspage='http://www.apple.com/quicktime/download/'> </EMBED> </OBJECT> </div><!--END movie--> </div><!--END trailer--> <div id="credits"> <img src="images/credits.jpg" /> </div><!--END credits--> </div><!--END content--> <div id="footer"> </div><!--END footer--> </div><!--END wrap--> </div><!--END page--> </body> </html> Code (markup): CSS /*RESETS & BASIC PAGE SETUP*/ *{ margin: 0; padding: 0; } html{ overflow-y: scroll; } body{ font: 62.5% Helvetica, Arial, Verdana, Geneva, sans-serif; background: #057eb7; } ul{ list-style: none inside; } p{ font-size: 1.2em; line-height: 1.3em; margin-bottom: 1.2em; } a{ outline: none; color: #999999; } a img{ border: none; } /*END RESET*/ /*TOOLBOX*/ .floatleft{ float: left; } .floatright{ float: right; } .clear{ clear: both; } /*END TOOLBOX*/ /*STRUCTURE & STUFF*/ div#page{ width: 960px; margin: 0 auto; background: #ffffff; } div#wrap{ margin: 0 auto; } /*HEADER*/ div#header{ width: 949px; margin: 0 auto; } /*NAV*/ ul#nav{ width: 949px; height: 47px; margin: 0 auto; } ul#nav li{ display: inline; } ul#nav li a{ display: block; height: 47px; text-indent: -9999px; float: left; } ul#nav li#nav-home a{ width: 154px; background: url(images/nav-home.jpg) bottom center no-repeat; } ul#nav li#nav-about a{ width: 129px; background: url(images/nav-about.jpg) bottom center no-repeat; } ul#nav li#nav-screening a{ width: 200px; background: url(images/nav-screening.jpg) bottom center no-repeat; } ul#nav li#nav-journal a{ width: 153px; background: url(images/nav-journal.jpg) bottom center no-repeat; } ul#nav li#nav-media a{ width: 118px; background: url(images/nav-media.jpg) bottom center no-repeat; } ul#nav li#nav-partners a{ width: 195px; background: url(images/nav-partners.jpg) bottom center no-repeat; } ul#nav li#nav-home a:hover{ background-position: top center; } ul#nav li#nav-about a:hover{ background-position: top center; } ul#nav li#nav-screening a:hover{ background-position: top center; } ul#nav li#nav-journal a:hover{ background-position: top center; } ul#nav li#nav-media a:hover{ background-position: top center; } ul#nav li#nav-partners a:hover{ background-position: top center; } ul#nav li ul{ display: none; position: absolute; } ul#nav li:hover ul{ display: block; border: 1px solid #057eb7; background: #ffffff; text-align: center; } /*END NAV*/ /*END HEADER*/ /*CONTENT*/ div#crest{ width: 949px; height: 136px; background: url(images/crest.jpg); } div#trailer{ width: 949px; height: 741px; background: url(images/trailerbg.jpg); } div#trailer div#movie{ width: 350px; height: 270px; float: right; padding: 100px 50px 0 0; } div#credits{ width: 949px; height: 316px; } /*END CONTENT*/ /*END STRUCTURE & STUFF*/ Code (markup): Here's the problem: My hover state is working, but the "li" in the "ul" that contains the drop down menu isn't working. It keeps repeating the background image of the root "li" when it should be showing the drop down menu with the links. Not the same repeated image. Here's a link where you can view it for yourself: hollywoodisle .com/test. I've been working on this problem for the last day and a half. Any help would be greatly appreciated. Peace, Dhane Diesil
I'm going to give you a weird kind of answer. I'm an ecommerce developer and build dropdown menus on extremely demanding websites. I've run into more IE6 bugs than you can ever imagine with these things, including one I discovered and published called Isochrome. My conclusions after about 150 ecommerce websites is to avoid the UL container like the plague. I now use dropdown CSS menus that use nothing but divs. Dozens of bugs are avoided, and menu development time went to 20% of what it was. Don't misunderstand me. There's nothing wrong with the UL container. IE6 is the whole reason to avoid the UL.
Qube99, Thanks for the insight. I'll try out that technique. By the way, what's Isochrome? Peace, Dhane Diesil