Arm0geddon Arm0geddon - 4 months ago 8
Javascript Question

Why is the drop down menu hiding behind jQuery button?

Why is the menu drop down hiding behind the jQuery button?

enter image description here

div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
position: relative;
z-index: 9999;
}

Han Han
Answer

I also met this problem. I've found the cause and solution.

Cause: the button is rendered after the menu but it has been wrapped by some additional elements by jquery-ui, hence its z-index has been increased.

Solution: to overcome the problem, we can increase z-index of the menu (better way than decreasing z-index of many buttons). But please remember that

"z-index only works on positioned elements (position:absolute, position:relative, or position:fixed)"

That so we need to position our menu also. Here is my code:

<div style="position:relative;z-index:99"> MENU HERE </div>