Search code examples
cssz-index

Z-index issue with CSS dropdown menu appearing behind jQuery slider

I've messed about with z-index until I'm blue in the face on this one now.

It's no doubt going to be simple though.

Please view this website and hover over 'Why Us' in the navigation menu. The dropdown menu appears behind the slider. I'm sure it must only be a z-index / position issue but I've not managed to see where the problem is.

(Not posted jsFiddle or code because imagine it will be quicker for you to identify issue directly in browser/on website).

Solution

  • You can solve it with z-index alone (plus fixing the overflow, too, so not really alone, I guess).

    header.container {
    overflow: visible;
    z-index: 2;
}
#page.container {
    overflow: visible;
    z-index: 1;
}