ul hidden by overlapping div

Question

I have a navigation menu using nested ul's. When the top ul is hovered over it uses jquery's .slidedown to display the submenu ul. This part works fine. The problem I run into is when the submenu is displayed the lower portions (bottom li's) are overlapped by a div further down the doc and I am unable to click on those sub menu items. Here is the HTML. The question is simply how do I specify which element should be in the foreground when I have overlapping elements?

Answer 1

The stack order of elements is determined by the z-index CSS attribute.

Answer 2

CSS:

z-index: x;

where x is the z-index,

the higher the z-index, the more on top the element

Answer 3

You want to use the z-index CSS property.

Answer 4

Look into the z-index property in CSS

Answer 5

Ah! Something went bad with you're code tags...

But it sounds like you might be looking for the z-index? Elements with a higher z-index would be above the other elements.

So on your navigation you would want:

z-index: 1; (or maybe higher if you want)

and be sure to also have

position: relative;

set as well.