PDA

View Full Version : Drop Down Menu not working in IE6



Missy Sue
Feb 8th, 2007, 12:35 AM
Please could someone please help me with this. I think I need a fresh pair of eyes. This code has been adapted for my site from CSS Play (http://www.cssplay.co.uk/menus/basic_dd.html). The drop down menu is supposed to work in IE6 and IE7, but I can't seem to get it to work in IE6:confused: . Hear are samples of the code I have used:

HTML

<div id="menu">
<ul>
<li><a href="index.html">Websites<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="websites/csszengarden.html" title="My CSS Zen Garden Contribution">CSS Zen Garden</a></li>
<li><a href="websites/chessvictoria.html" title="Chess Victoria">Chess Victoria Website</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>

CSS

#menu{

font: bold 11px Verdana, sans-serif;
left:10%;
padding:0;
margin:auto 10%;
height:20px;
}

#menu ul{
list-style-type:none;
padding:0;
margin:0;
}

#menu li{
float:left;
position:relative;
z-index:100;
}

#menu table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:-1px;
top:25px;
}

#menu a, #menu :visited {
display:block;
width:100px;
padding:3px;
color:#000;
background: transparent url(images/trans6.gif) repeat;
border: 1px solid #B78E96;
border-bottom: none;
text-decoration:none;
}

#menu :hover{
color:#fff;
background: transparent url(images/trans7.gif) repeat;
}

#menu ul ul {
visibility:hidden;
position:absolute;
width:100px;
margin-left: 0;
}

menu ul li:hover ul,
#menu ul a:hover ul{
visibility:visible;
}

If you have IE7, you can see the drop down menu working properly at my site HERE (http://missysuewebdesign.byethost31.com).

Any help would be very much appreciated.

rmedek
Feb 8th, 2007, 05:54 AM
IE 6 only supports :hover on <a> elements. You'll need to use Javascript to get it working cross-browser. Search Google for "sfhover.js" or "iehover.js" for good, lightweight versions to use.

Missy Sue
Feb 8th, 2007, 07:29 AM
Thanks so much for the advice. I think adding javascript is the track I will have to take. If you check out CSS Play (link in my first post), where I adapted the menu from, is designed not to use javascript at all and also work in IE6. I just can't see where I have gone wrong. Thanks again and I will take your advice.

rmedek
Feb 8th, 2007, 07:48 AM
Oh, I just noticed all the conditional comments being added. Stu's method involves using IE-only conditional comments to wrap each nested menu in a table and a link, then styling the :hover of that link; in essence, using conditional comments to get around the fact that IE only supports :hover on links.

I'm on a mac, so it's a pain in the rear to debug IE issues, but I'll stick with my original recommendation to use JS, combined with an easy, standards-compliant, CC-free method like Suckerfish Dropdowns.

Missy Sue
Feb 8th, 2007, 12:36 PM
I have now taken your advice and everything is working wonderfully in IE6, IE7 and Firefox. Thanks so much.

P.S. I don't have a mac so I not sure about that, but I'm hoping.

THANKS AGAIN:D