CSS Superfish Menu уровня 2 закрывает элемент меню уровня 1

У меня проблема, связанная с CSS, с моим меню superfish на http://redaxo.witconsult.de

после выяснения большинства проблем у меня возникла следующая проблема: меню, в которых необходим элемент 2-го уровня (подменю), блокируют элемент 1-го уровня. Элемент 1-го уровня теперь нельзя выбрать! ("Leistungen" & "Kontakt") Я знаю, что в оригинальном суперфише этого нет.

Я пробовал работать с position: relative; и z-index для решения этой проблемы, но это не работает. Если это не исходит от элемента, покрываемого другим, я действительно понятия не имею, что происходит... :(

Большое спасибо!

вот мой код css: более важные вещи находятся дальше, где начинается /** DEMO SKIN **/

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

person j00ls    schedule 21.03.2011    source источник
comment
С какой стати это в исходном коде? <META HTTP-EQUIV=Refresh CONTENT="10; URL=#">. Это делает отладку исключительно раздражающей. Пожалуйста, удалите его.   -  person thirtydot    schedule 21.03.2011
comment
(к счастью, в расширении веб-разработчика есть возможность отключить это)   -  person thirtydot    schedule 21.03.2011


Ответы (2)


Проблема в том, что элементы ul, составляющие раскрывающиеся списки, перекрывают область, в которой они не должны находиться:

  • На .sf-menu li li установите top: 0.
  • На селекторе .sf-menu li:hover ul, .sf-menu li.sfHover ul установите top: 6em.
  • ???
  • Выгода!

Мне больше нравится ваше меню, когда JavaScript отключен. Эффект затухания (и особенно задержка, когда вы mouseout из подменю) кажется неуклюжим и медленным.

person thirtydot    schedule 21.03.2011
comment
Спасибо! Это сработало сразу. :) Я проверю, что вы сказали об эффектах js - однако я заметил огромную разницу между браузерами. - person j00ls; 21.03.2011
comment
Я тестировал в Firefox/Windows 7. Быстрая проверка в Chrome, в этом браузере все нормально. - person thirtydot; 21.03.2011
comment
Теперь я могу :) спасибо! надеюсь, это не спам... но мне нравится, как работает этот сайт. :) - person j00ls; 22.03.2011
comment
Спасибо за +1. см. здесь рекомендации по комментариям, если вам интересно. - person thirtydot; 22.03.2011

Я знаю, что этот ответ приходит немного позже, но я хочу очистить его, чтобы он мог помочь другим.

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

Это сделает submenu всегда позади главного меню, независимо от его положения.

person BestAnswer    schedule 29.09.2013