1

Bootstrap メニューの背景色を変更しましたが、サブメニュー (ドロップダウン項目をクリックすると開くメニュー) にフォーカスがある (つまり、マウスが上にある) と、リストのメイン ドロップダウン項目の背景色が変わります。それ）。

これは、ホバー時のドロップダウンです (意図したとおりに動作しています)。

ここに画像の説明を入力

これは、ドロップダウンがクリックされたときに開くサブメニューの上にマウスを置いたときのドロップダウンです (背景色は私が望むものではありません; 背景色は同じままにしておきたいです): ここに画像の説明を入力

HTMLは次のとおりです。

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        Dropdown <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li class="dropdown-header">Nav header</li>
        <li><a href="#">Separated link</a></li>
        <li><a href="#">One more separated link</a></li>
    </ul>
</li>

そしてCSS：

.navbar-mainnav  {
    background-color: #883333;
    background-image: none;
}

.navbar-mainnav a, .navbar-mainnav a:hover {
    color: #FFFFFF;
}

.navbar-mainnav .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
    color: #ffffff;
    background-color:transparent;
}

.navbar-mainnav .nav > li > a:hover, .mainnav > li.dropdown.open  {
  background-image: none;
  background-color: #B54646;
}

.navbar-mainnav .dropdown-menu > li > a:hover, .navbar-mainnav .dropdown-menu > li > a:focus {
  background-color: white;
  background-image: none;
  filter: none;
}

.navbar-mainnav .dropdown-menu > li > a:hover {
  background-color: #CC6666;
  background-image: none;
}
4

4 に答える 4

0

多分これを試してみませんか？動作することを確認できるように、jsfiddle を投稿してください。

.navbar-default .navbar-nav > li:hover {
  background: #your-background-color;
  color: #your-text-color;
}
于 2015-05-08T18:37:11.747 に答える
0

このcssを置くだけで、これは機能していると思います

.navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle {
background-color: #B54646;
}
于 2013-08-31T12:17:01.100 に答える