CSS Superfish Menu level 2 covers up level 1 Menu element

Question

I have a CSS related Problem with my superfish menu on http://redaxo.witconsult.de

after figuring out most of the problems I now have the following issue: The menues where a 2nd level element is needed (submenues) blocks the level 1 element. The 1st level element can now never be selected! ("Leistungen" & "Kontakt") I know that in the original superfish this is not the case.

I have tried working with position: relative; and z-index to solve this problem but it is not working. If it's not coming from the element being covered by another one I really have no idea whats going on... :(

Thanks a lot!

here is my css code: The more important stuff is further down where /** DEMO SKIN **/ starts

    /*** ESSENTIAL STYLES ***/
    .sf-menu, .sf-menu * {
        margin:         0;
        padding:        0;
        list-style:     none;
    }
    .sf-menu {
    }
    .sf-menu ul {
        position:       absolute;
        top:            -999em;
        width:          10em; /* left offset of submenus need to match (see below) */
    }
    .sf-menu ul li {
        width:          100%;
    }
    .sf-menu li:hover {
        visibility:     inherit; /* fixes IE7 'sticky bug' */   
    }
    .sf-menu li {
        float:          left;
        position:       relative;
    }
    .sf-menu a {
        display:        block;
        position:       relative;
    }
    .sf-menu li:hover ul,
    .sf-menu li.sfHover ul {
        left:           0;
        top:            2.5em; /* match top ul list item height */
        z-index:        99;
    }
    ul.sf-menu li:hover li ul,
    ul.sf-menu li.sfHover li ul {
        top:            -999em;
    }
    ul.sf-menu li li:hover ul,
    ul.sf-menu li li.sfHover ul {
        left:           10em; /* match ul width */
        top:            0;
    }
    ul.sf-menu li li:hover li ul,
    ul.sf-menu li li.sfHover li ul {
        top:            -999em;
    }
    ul.sf-menu li li li:hover ul,
    ul.sf-menu li li li.sfHover ul {
        left:           10em; /* match ul width */
        top:            0;
    }

    /** DEMO SKIN **/
    .sf-menu {
        float:          left;
        margin-bottom:  1em;
    }
    .sf-menu a {
        text-indent: 7px;
        color: #333;
    }


    .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
        color:          #333;
    }

    .sf-menu li a:visited  { /* visited pseudo selector so IE6 applies text colour*/
        color:          #333;
    }

    .sf-menu li li a:visited  { /* visited pseudo selector so IE6 applies text colour*/
        color:          #DDD;
    }
    .sf-menu li {       /*//// menu lvl 1 /////*/
        color:          #333;
        width:          118px;
        height:         25px;
        padding-top:    60px;
        font-weight:    normal;
        font-size:      14px;
        text-decoration:none;
        position:relative;
        background:     url(../images/menu/menuitem.png);
        z-index: 1;
    }

    .sf-menu li a:focus, .sf-menu li a:hover, .sf-menu li a:active {
        color:          #DDD;
        top:            -60px;
        height:         25px;
        padding-top:    60px;
        position:relative;
        background:     url(../images/menu/menuitem-mo.png);
        z-index: 1;

    }


    .sf-menu li li {    /*//// submenu lvl 2 /////*/
        font-size:      12px;
        top:            50px;
        height:         21px;
        padding-top:    5px;
        background:     url(../images/png_black40per.png);
    }

    .sf-menu li li a {  
        color:          #DDD;
    }

    .sf-menu li li a:focus, .sf-menu li li a:hover, .sf-menu li li a:active {
        color:          #333;
        top:            -5px;
        height:         21px;
        padding-top:    5px;
        background:     url(../images/png_white40per.png);
    }

Answer 1

The issue is that the ul elements that comprise the dropdowns are overlapping an area they shouldn't:

• On .sf-menu li li, set top: 0.
• On the selector .sf-menu li:hover ul, .sf-menu li.sfHover ul, set top: 6em.
• ???
• Profit!

I like your menu better when JavaScript is disabled. The fade effect (and especially the delay when you mouseout from the submenu) feels clunky and slow.

Answer 2

I know that this answer comes a bit late now but I want to clear this so it may help others.

For submenu use top:100%; z-index:-1;

This will make submenu always behind main menu irrespective of its position.