Hey Guys,

 

I'm using the Sons of Suckerfish to create a single level dropdown menu for a site and it's working perfectly in Firefox and Safari. However the dropdown items are not appearing directly below navbar items when hovered in both IE6 and IE7, they are appearing more toward the top and to the right. Any idea on how to fix this? I cannot post a direct link to the site for privacy reasons, but I'll provide the code and kindly ask for you help all the same:

 

ul#topnav {
padding: 12px 0 0 30px;
margin: 0;
list-style: none;
}

ul#topnav li ul li a {
display:block;
width: 10em;
}

ul#topnav li{
float: left;
margin-right:35px; /*to create some spacing between items*/
}

ul#topnav li ul{
position: absolute;
width: 10em;
left: -999em;
list-style: none;
margin-left: 0;
padding:8px 5px 0 0;
}

ul#topnav li:hover ul, ul#topnav li.sfhover ul { 
left: auto;
}

 

I've used some paddings/margins on some elements to align them properly and give them some breathing room. Thanks for reading, I'd appreciate any help!

Hi, you could try using a css reset at the top of your css file.

It might just be a case of default browser settings changing the appearance slightly.

* {
padding:0;
margin:0;
}

If that doesn't work, try changing the left:auto; in

ul#topnav li:hover ul, ul#topnav li.sfhover ul {
left: auto;
}

to a specific measurement, i.e left:5px or whatever.

Thanks for the suggestion Elan, but I'm already using Eric Meyer's reset.

 

Changing the value to left: 5px makes all of the nested UL's appear 5px to the left of their parent container, so they're all dropping down at the far left of the horizontal navigation bar.

What if you put position:relative; on ul#topnav li and left:0; for the nested ul.

That was very clever, it worked, thanks a lot! However for IE7 I had to remove the position static from:

 

 

ul#topnav li:hover, ul#topnav li.hover {
position:static;
}

 

to get it to work. I had to use that to overcome an IE7 bug that stops the drop downs from hiding after the focus is changed on the page, so I'll have to go look for an alternative.