0

Here is the link to the fiddle : http://jsfiddle.net/UL2LB/1/

As you can see, I only have specified z-indexes on the hidden sub-list and the nav element, both of which have explicit positioning. So my question is, why the hell is my sub-menu still showing on top of the <nav>?

Thank you in advance for any answer.

Krimo
  • 954
  • 8
  • 20
  • See the answers posted to this question: http://stackoverflow.com/questions/5218927/z-index-not-working-with-fixed-positioning – Purpletoucan Oct 11 '11 at 15:19

1 Answers1

0

Give your ul a pixel width and add position:relative to it the li.

nav.global ul li ul {
    width:180px;
    ...
}

nav.global > ul > li {
    display: inline-block;
    margin-left: 2%;
    position: relative;
}
brenjt
  • 15,997
  • 13
  • 77
  • 118
  • It looks fine to me. What browser are you using? – brenjt Oct 12 '11 at 14:15
  • Tried this on FF, Chrome, Opera... The subnav still shows up on top instead of below the nav – Krimo Oct 13 '11 at 09:13
  • @GuyFawkes Okay, When I stretch the screen out and all the links are lined up it doesn't go over the nav but stays under. If the screen is smaller and the navigation wraps the subnav is on top. So there really isn't away to get it to be under the nav when it wraps without javascript. I would make your nav a fixed width that cannot wrap. Unless you are going for that liquid feel. Let me know what you think. – brenjt Oct 13 '11 at 14:40