Wrote this from scratch… it’s a centered horizontal drop-down menu with centered horizontal sub menu. It’s not working in IE7 (but of course works everywhere else), and for the life of me I can’t figure out why.
http://www.bryanharley.com/test.html
I’m using display:none; to hide the second level UL. Previously I tried left:-999%; to hide and left:auto; to reveal, but that had the same result in IE7 = no workie. You can see that here: http://www.bryanharley.com/test1.html.
In IE7 you’ll see that second level UL just hugs the right side of its parent, top level LI, instead of dropping below it like in every other browser.
I noticed if I change this:
.nav ul li:hover ul{
position: absolute;
display: block;
}
to this:
.nav ul li:hover ul{
position: absolute;
display: inline;
}
The problem in IE7 is then equal in all other browsers. Not sure what that means, maybe IE7 isn’t understanding display:block; in this instance? It’s reading it as display:inline;? But why?
Someone else told me the position:absolute; was my problem. But if I change that position:relative; everything goes wonky, as evident here: http://www.bryanharley.com/test2.html.
I’m really at a loss here. :injured:
