Fixed header with z-index 1 disables Drop down menus

[bramwolf]

I’m having issues using the submenus of a drop down menu placed inside a fixed header. The header is placed over the rest of the content, which scrolls underneath it nicely and the menu is inside the header. When I hover over de menu items the drop down menus do appear, but when I try and hover over them they disappear as if I hovered out from over them.

I’ve tried different z-index settings, positioning states of the different elements and the use of wrapper divs. But I can’t get it to work…

The menu works when the header is inside the document flow, but whenever I make it fixed it stops functioning. Any ideas of what could be causing this? I believe it must be a combination of a z-index and positioning problem, just can;t figure out what exactly.

You’ll quickly see what I mean on the page below, I don’t know how to make a simple JSfidlle of it since there are alot of elements which may or may not be involved in this issue.

http://www.reflaction.eu/diensten/it-based-audit/

Any help would be greatly appreciated! Bram Wolf

[RyanReese]

The z-index on Javascript-created elements (example below) is fluttering over your dropdown so you’re actually hovering over this element instead of the dropdown (that’s why it disappears.)

<div class="ddshadow toplevelshadow" style="z-index: 997; overflow: visible; width: 138px; left: 1155px; top: 46px; height: 0px;"></div>

Since the highest z-index I saw that this created was 999 (it’s 997 because I kept deleting and overwriting some styles on this element so it kept creating new ones that were fresh), let’s give .container a 1000 z-index.

.container {
  z-index:1000;
  position:relative;
}

Add that in your container class.

[bramwolf]

Wow,

Thanks man! I was hoping it was something simple like that.
I would have never found that out, thank you so much

Gr,
Bram

[RyanReese]

Just needed a second set of eyes you’re welcome.