Superfish z-index issue for IE 7

Question

I cannot seem to fix the z-index issue with IE7 for superfish.

Jsfiddle example

I just need menu showing up on top of background font not the other way round basically.

I've tried putting in z-index on sh-menu classes and li's but nothing seems to work.

Is there something I need to look at?

Answer 1

The only two places I set a z-index value in superfish are:

.sf-menu li {
    float: left;
    position: relative;
    z-index: 999; /* Ensure drop-down menus are always on top */
}

.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
    left: 0;
    top: 100%;    /* Ensures that the drop down is always directly below the nav bar */
    z-index: 99;
}

Answer 2

Try setting position: absolute in this css rule .sf-menu li.sfHover ul

http://jsfiddle.net/zSTum/1/

Answer 3

Add the z-index attribute to your .menu class instead.

e.g.

.menu {
  z-index:9999;
}