Arm0geddon Arm0geddon - 1 year ago 43
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 ul li a, 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

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>