I’m working on a site where I need to do a dropdown navigation menu. Here’s the site:
*link broken*
The root menu is just a regular unordered list, with each list item floating left so it displays horizontally. Each list item contains its own unordered list, which forms the dropdown. The dropdown is absolutely positioned so it displays on top of everything else on teh page. It’s hidden initially, and then when you mouseover the root list item, it toggles the display/visibility settings to display it.
It works perfectly everywhere except in IE6 and IE7 – the dropdown appears underneath the far right end of its parent list item. I cannot for the life of me figure out why – in every other browser, the dropdown appears directly underneath its parent, exactly how I want it.
Weird thing is, I’ve done plenty of sites like this before and I’ve never had this problem. I even made a sample menu for my own use just for these occasions, and while THAT one works in IE6 and IE7, this one doesn’t. Here’s the sample:
*link broken*
Note how the sample one behaves in IE6/IE7 (dropdown directly under parent list item) compared to the other one (dropdown way off to the side). I can’t figure out what’s different between the two that’s causing this problem.
Please help! I’m out of ideas…
