CSS快鱼2级菜单涵盖了一级菜单元素

我必须搞清楚大部分现在我有以下问题的问题后，我的快鱼菜单CSS相关的问题上http://redaxo.witconsult.de CSS快鱼2级菜单涵盖了一级菜单元素

：该menues其中一个2级元素是需要的（子菜单）阻止1级元素。第一级元素现在不能被选中！（“Leistungen”&“Kontakt”）我知道在原来的superfish中情况并非如此。

我尝试过使用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); 
    }

来源

2011-03-21 j00ls

为什么地球上这是源代码？ ''。它使调试**异常烦人**。请删除它。 – thirtydot 2011-03-21 15:09:48

（幸运的是，Web Developer扩展有一个选项可以禁用它） – thirtydot 2011-03-21 15:17:06

的问题是，包含下拉式菜单中ul元件是重叠的区域它们不应：

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

当JavaScript禁用时，我更喜欢你的菜单。褪色效果（特别是从子菜单mouseout时的延迟）感觉笨重和缓慢。

来源

2011-03-21 15:24:44 thirtydot

谢谢！它马上工作。 :)我会检查一下你对js效果的评论 - 但是我注意到浏览器之间的巨大差异。 – j00ls 2011-03-21 16:30:30

我在Firefox/Windows 7中进行了测试。快速检查Chrome，在浏览器中看起来很好。 – thirtydot 2011-03-21 16:34:13

是的，我修好了，谢谢你:) 对不起我现在还不能投票:( – j00ls 2011-03-22 10:22:29

我知道这个答案现在有点晚了，但我想清除它，这样可以帮助其他人。

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

这将使submenu总是在主菜单后面，无论其位置如何。

来源

2013-09-29 14:18:39 BestAnswer

CSS快鱼2级菜单涵盖了一级菜单元素

回答

相关问题