1

我在http://redaxo.witconsult.de上的 superfish 菜单有一个与 CSS 相关的问题

在解决了大部分问题之后，我现在遇到了以下问题：需要 2 级元素的菜单（子菜单）阻止了 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);
    }
4

2 回答 2

1

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

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

当 JavaScript 被禁用时，我更喜欢你的菜单。淡入淡出效果（尤其是mouseout从子菜单中的延迟）感觉笨重且缓慢。

于 2011-03-21T15:24:44.987 回答
0

我知道这个答案现在来得有点晚，但我想澄清一下，这样它可以帮助其他人。

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

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

于 2013-09-29T14:18:39.383 回答