1

http://redaxo.witconsult.deのスーパーフィッシュ メニューに CSS 関連の問題があります。

ほとんどの問題を解決した後、次の問題が発生しました。第 2 レベルの要素が必要なメニュー (サブメニュー) がレベル 1 の要素をブロックします。第 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 に答える