0

aリスト項目, b, c, d, でeナビゲーションメニューを作成していますf。

ユーザーがリストdにカーソルを合わせると、サブメニュー項目がそれぞれ、、、dとして内部に表示されます。d1d2d3d4d5

メニューにはdカーソルを合わせると背景色がありますが、ユーザーがサブメニュー項目にカーソルを合わせると、背景色がd消えます。

私が望むのは、ユーザーがサブアイテムをホバリングしているときに、ホバーの色がオンのままにdなり、ユーザーがサブメニュー項目からマウスを離したときにのみ消えることです。

これが私のcodeです。

JSFiddle: http://jsfiddle.net/mm9QN/

HTML:

             <ul class="nav navbar-nav">
                <li class="active"><a href="#">a</a></li>
                <li><a href="#">b</a></li>
                <li><a href="#">c</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">d</a>
                  <ul class="dropdown-menu">
                    <li><a href="#">d1</a></li>
                    <li><a href="#">d2</a></li>
                    <li><a href="#">d3</a></li>
                    <li><a href="#">d4</a></li>
                    <li><a href="#">d5</a></li>
                  </ul>
                </li>
                <li><a href="#">e</a></li>
                <li><a href="#">f</a></li>
              </ul>

CSS: Twitter ブートストラップを使用しているため、完全な CSS コードを貼り付けることができないため、以下は同じリンクです。

http://getbootstrap.com/dist/css/bootstrap.css

クリックではなくホバーメニューが欲しかったので、同じコードを次に示します

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

ソリューション待ち。

4

1 に答える 1

8

ドロップダウン メニューはリンク内にないため、リンクにカーソルを合わせたときに適用されるスタイルは、ドロップダウン メニューにカーソルを合わせたときに適用されません。

リスト アイテムにホバー スタイルを適用すると、リスト アイテム内にあるため、ドロップダウン メニューにホバーしたときにも適用されます。

.nav > li:hover { background: #eee; }

デモ: http://jsfiddle.net/mm9QN/1/

于 2013-09-28T11:34:31.247 に答える