Question

Here is my current jsfiddle for the navigation bar.
http://jsfiddle.net/EPh6j/28/

Please stretch the bar so it is a single line otherwise you will get mixed results.

The problem only occurs in ie9 as far as I know. What happens is when you hover over one of the main links the drop down comes down. However, as soon as the drop down passes the bottom of the main menu it turns invisible. What is even more confusing is that the ul border for the submenu shows but not the elements.

Here is an example of what I mean:
Notice how it is visible and then disappears past the bottom.
https://i.stack.imgur.com/YnnjY.png

I did the above when I was trying to figure out my problem to start. In the jsfiddle, it moves all the way down as it should and is thus completely blank.
I’m completely stumped on getting this one to work.

My CSS:

.menu li li {
    float:none;
    position: relative;
}

.menu li ul {
    left:0;
    position:absolute;
    top:0;
    visibility:hidden;
}

.menu li:hover > ul {
    top:100%;
    visibility:visible ;
}

Suggestions?

Answer 1

I suspected a z-index issue, so I stripped them all from your fiddle. Seems to have fixed it.

BTW, “sponsorships”. 😉