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);
    }

Why on earth is this in the source code? ``. It makes debugging **exceptionally annoying**. Please remove it. — thirtydot, Mar 21 '11 at 15:09
(thankfully, the Web Developer extension has an option to disable that) — thirtydot, Mar 21 '11 at 15:17

score 1 · Accepted Answer · answered Mar 21 '11 at 15:24

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.

answered Mar 21 '11 at 15:24

thirtydot

224,678
48
389
349

Thanks! It worked right away. :) I will check out what you said about the js effects - however I did notice theres a huge difference in between browsers. – j00ls Mar 21 '11 at 16:30
I was testing in Firefox/Windows 7. Quickly checking in Chrome, it seems fine in that browser. – thirtydot Mar 21 '11 at 16:34
I can now :) thanks! hope this isnt spam... but I do like the way this site works. :) – j00ls Mar 22 '11 at 12:16
Thanks for the +1. [See here](http://stackoverflow.com/privileges/comment) for the comment guidelines, if you're curious. – thirtydot Mar 22 '11 at 12:19

score 0 · Answer 2 · edited Sep 29 '13 at 14:42

0

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.

edited Sep 29 '13 at 14:42

Avi

21,182
26
82
121

answered Sep 29 '13 at 14:18

BestAnswer

1

CSS Superfish Menu level 2 covers up level 1 Menu element

2 Answers2