Question

我在http://redaxo.witconsult.de

上的超级鱼菜单上遇到了CSS相关问题找出大部分问题之后，我现在遇到以下问题：需要第二级元素的子菜单（子菜单）会阻止第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);
    }

Answer 1

问题在于构成下拉列表的ul元素与它们不应该重叠的区域重叠：

在.sf-menu li li上，设置top: 0。
在选择器.sf-menu li:hover ul, .sf-menu li.sfHover ul上，设置top: 6em。
???
利润！

禁用JavaScript时，我更喜欢您的菜单。淡入淡出效果（尤其是从子菜单mouseout时的延迟）感觉笨拙和缓慢。

Answer 2

我知道这个答案现在有点晚了但是我想清楚这一点，这样可以帮助别人。

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

这将使submenu始终位于主菜单后面，无论其位置如何。

CSS Superfish菜单级别2涵盖了1级菜单元素

2 个答案: