CSS Superfish Меню уровня 2 закрывает уровень 1 Элемент меню - PullRequest
Новая
       14

CSS Superfish Меню уровня 2 закрывает уровень 1 Элемент меню

1 голос
/ 21 марта 2011

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

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

Я пытался работать с позицией: относительный;и 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);
    }

Ответы [ 2 ]

1 голос
/ 21 марта 2011

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

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

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

0 голосов
/ 29 сентября 2013

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

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

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

...