0

私はウェブサイトを開発しており、CSS のみのドロップダウン メニューの従来の手法を使用していますが、CSS3 属性を統合しています。そうは言っても、クライアントは、

  • それらを含む s。これにより、メニュー間を移行するときにけいれんが発生します。

    CSS は次のようになります。

    #nav{
background-image:url(../images/nav-bg.png);
height: 32px;
width: 100%;
padding-right:8px;
background-repeat:repeat-x;
z-index:3;
}

#drop { list-style-type: none; height: 32px; padding: 0; margin: 0 auto; width: 500px; vertical-align: baseline; color: #fbf9ec; }
#drop li { float: left; position: relative; padding: 0; line-height: 32px; background: #3a7c38 url(../images/nav-bg.png) repeat-x 0 0;}
#drop li:hover { background-position: 0 -40px;}
#drop li a { display: block; padding: 0 15px; color: #fbf9ec; text-decoration: none; }
#drop li a:hover { color: #fbf9ec; }
#drop li ul { opacity: 0; position: absolute; left: 0; width: 14em; background: #3a7c38; list-style-type: none; padding: 0; margin: 0; z-index: 2; box-shadow: 4px 4px 7px #888;}
#drop li:hover ul { opacity: 1; }
#drop li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#drop li:hover ul li { height: 30px; line-height: 30px; }
#drop li ul li a { background: #3a7c38; }
#drop li ul li a:hover { background: #254F24; }

    実際の例は次の場所にあります。

    MasonandLauren.com/flotec/secondary.html

    (ご安心ください - デザインはお客様のリクエストに基づいており、私自身のものではありません)

    けいれんをなくすための助けをいただければ幸いです！

    ありがとう！〜メイソン

    • 4

    1 に答える 1

    0

    メイン ナビゲーション項目の z-index を3 (サブ メニュー項目 +1) に設定してみてください。

    サブタブの z-index が原因で、マウスの移動に合わせてサブタブが順番に上下に移動していたようです。

    #trans-nav li {
float: left;
position: relative;
padding: 0;
line-height: 32px;
background: #3A7C38 url(../images/nav-bg.png) repeat-x 0 0;
z-index: 3;  /* <-- this is the new one */
    于 2012-04-24T19:42:02.610 に答える