I’m working on a site where I need to do a dropdown navigation menu. Here’s the site:
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:
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.
I figured it out…I had the text of the root menu item just as plain text with the <ul> for the submenu next to it. Regular text is an inline element by default, so the submenu was appearing to the side of it rather than underneath. So I wrapped the root menu text in a div to turn it into a block element, and that pushed the submenu underneath where I wanted it.
So actually, wouldn’t IE6 and IE7 be exhibiting the correct behavior here (putting the submenu off to the side rather than underneath)? I mean, if the text wasn’t a block element, it shouldn’t have been occupying its own line like it was in the other browsers…
Anyway, yeah, it’s fixed :)
Viewing 2 posts - 1 through 2 (of 2 total)
The topic ‘CSS dropdown menu not working in IE6/IE7’ is closed to new replies.