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級菜單涵蓋了一級菜單元素

回答

相關問題