2011-03-21 72 views
1

我必須搞清楚大部分現在我有以下問題的問題後,我的快魚菜單CSS相關的問題上http://redaxo.witconsult.deCSS快魚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); 
    } 
+0

爲什麼地球上這是源代碼? ''。它使調試**異常煩人**。請刪除它。 – thirtydot 2011-03-21 15:09:48

+0

(幸運的是,Web Developer擴展有一個選項可以禁用它) – thirtydot 2011-03-21 15:17:06

回答

1

的問題是,包含下拉式菜單中ul元件是重疊的區域它們不應:

  • .sf-menu li li,設置top: 0
  • 在選擇器.sf-menu li:hover ul, .sf-menu li.sfHover ul上設置top: 6em
  • ???
  • 利潤!

當JavaScript禁用時,我更喜歡你的菜單。褪色效果(特別是從子菜單mouseout時的延遲)感覺笨重和緩慢。

+0

謝謝!它馬上工作。 :)我會檢查一下你對js效果的評論 - 但是我注意到瀏覽器之間的巨大差異。 – j00ls 2011-03-21 16:30:30

+0

我在Firefox/Windows 7中進行了測試。快速檢查Chrome,在瀏覽器中看起來很好。 – thirtydot 2011-03-21 16:34:13

+0

是的,我修好了,謝謝你:) 對不起我現在還不能投票:( – j00ls 2011-03-22 10:22:29

0

我知道這個答案現在有點晚了,但我想清除它,這樣可以幫助其他人。

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

這將使submenu總是在主菜單後面,無論其位置如何。