Clever Geek Handbook

Z-index / border issue with nav menu

http://jsfiddle.net/FS4zT/

If you follow the link above, you will see what is described below. Summary: I set the z-index of the submenu to 99 and the top-level menu z-index to 9. So basically I thought when I go to the 1st menu, the first submenu will stay in focus when I move the mouse over the submenu items ...

But for some reason in Firefox 11.0, it switches to the second top-level menu when I try to move the mouse pointer 2/3/4 of the first submenu position.

In IE 7: It works as desired, I can still see the border of the 2nd top level menu overlapping the submenu items even though their z index is higher. The border issue can even be seen in firefox.

Can someone shed some light on where I could go wrong?

+3


source to share


3 answers


Hope to fix this.



#menu li ul li { 
position: relative;
}
+10


source


Beware of the z-index stacking context. What you want doesn't work for parent-child z-indices.

The problem is that the parent li

submenu is not as wide as the submenu (4 times smaller). Therefore, if you hover to the right, it li

will lose focus.



One way to solve this problem is to set z-index: 0

al in the submenu ul

and z-index: 1

in the current submenu. The submenu should have position: absolute

.

Update: The solution from position: relative

(accepted answer) is really a good one. This works because the li

submenu does not make the parent container larger, since it is left floating.

+1


source


You have to change the height in #menu li

#menu li {
    width: 140px;
    height: 25px;
    float: left;
    border-right: 1px inset white;
    z-index: 9;
}

Another way you can use to keep your borders at 50px is if you add something like this to your CSS.

#menu li:hover ~ li{
    height:25px;
}
0


source






More articles:


All Articles