Bootstrap 3 - 擴展時的導航顏色

Question

我在bootstrap 3中創建了一個導航欄。導航欄是藍色的，當打開一個菜單（鼠標懸停）時，我想顯示綠色背景顏色的子菜單。

這裏是我的小提琴

https://jsfiddle.net/8jj2g4ym/2/

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

 
.navbar-default { 
 
    background-color: blue; 
 
    border-color: #e7e7e7; 
 
} 
 

 
@media (min-width: 768px) { 
 
.navbar-nav>li>a { 
 
    padding-top: 15px; 
 
    padding-bottom: 4px; 
 
}} 
 

 

 
.navbar-default .navbar-nav>li>a { 
 
    color:white; 
 
    FONT-SIZE: 12pt; 
 
    TEXT-DECORATION: none; 
 
    FONT-FAMILY: Arial; 
 
    WHITE-SPACE: nowrap; 
 
    DISPLAY: block; 
 
} 
 

 
.navbar-default .navbar-nav > li > a:hover, 
 
.navbar-default .navbar-nav > li > a:focus { 
 
    color: #333; 
 
    background-color: transparent; 
 
} 
 

 
.navbar-nav .open .dropdown-menu > li > a:hover, 
 
    .navbar-nav .open .dropdown-menu > li > a:focus { 
 
    background-color: green; 
 
    } 
 

 
.navbar-nav > li > a{ 
 
    padding-left:2px; 
 
    padding-right:2px; 
 
    margin-left:2px; 
 
    margin-right:2px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid" style="padding-left:2px;"> 
 
    <div class="navbar-header"> 
 
     
 
    
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu0 <b class="caret"></b></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#" style="cursor:pointer">Menu1</a></li> 
 
      <li><a href="#">Menu2</a></li> 
 
      <li><a href="#">Menu3</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav" > 
 
     <li ><a></a></li> 
 
     </ul> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Menu4</a></li> 
 
     
 
     
 
     </ul> 
 
     
 
    </div> 
 
    
 
    </div> 
 
</nav>

雖然如預期以藍色顯示的導航欄，打開過的項目有白色背景顏色（我想是綠色的）。

我爲此添加了一種風格，但它似乎沒有影響。

.navbar-nav .open .dropdown-menu > li > a:hover, 
    .navbar-nav .open .dropdown-menu > li > a:focus { 
    background-color: green; 
    } 

Answer 1

這裏的解決方案：

更改一些CSS規則，以滿足您的需求：

li.dropdown:hover > .dropdown-menu { 
    display: block; 
    background: #bacd63 !important; 
} 

.navbar-nav .dropdown-menu > li > a:hover, 
    .navbar-nav .dropdown-menu > li > a:focus { 
    background: green !important; 
    } 

這裏的小提琴：

https://jsfiddle.net/8jj2g4ym/3/

下面的代碼片段：

li.dropdown:hover > .dropdown-menu { 
 
    display: block; 
 
    background: #bacd63 !important; 
 
} 
 

 
.navbar-default { 
 
    background-color: blue; 
 
    border-color: #e7e7e7; 
 
} 
 

 
@media (min-width: 768px) { 
 
.navbar-nav>li>a { 
 
    padding-top: 15px; 
 
    padding-bottom: 4px; 
 
}} 
 

 

 
.navbar-default .navbar-nav>li>a { 
 
    color:white; 
 
    FONT-SIZE: 12pt; 
 
    TEXT-DECORATION: none; 
 
    FONT-FAMILY: Arial; 
 
    WHITE-SPACE: nowrap; 
 
    DISPLAY: block; 
 
} 
 

 
.navbar-default .navbar-nav > li > a:hover, 
 
.navbar-default .navbar-nav > li > a:focus { 
 
    color: #333; 
 
    background-color: transparent; 
 
} 
 

 
.navbar-nav .dropdown-menu > li > a:hover, 
 
    .navbar-nav .dropdown-menu > li > a:focus { 
 
    background: green !important; 
 
    } 
 

 
.navbar-nav > li > a{ 
 
    padding-left:2px; 
 
    padding-right:2px; 
 
    margin-left:2px; 
 
    margin-right:2px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid" style="padding-left:2px;"> 
 
    <div class="navbar-header"> 
 
     
 
    
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu0 <b class="caret"></b></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#" style="cursor:pointer">Menu1</a></li> 
 
      <li><a href="#">Menu2</a></li> 
 
      <li><a href="#">Menu3</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav" > 
 
     <li ><a></a></li> 
 
     </ul> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Menu4</a></li> 
 
     
 
     
 
     </ul> 
 
     
 
    </div> 
 
    
 
    </div> 
 
</nav>

希望這有助於。

Answer 2

添加到您的CSS：

.navbar-nav > li > .dropdown-menu{background-color:green!important;} 

Answer 3

添加

.navbar-toggle:hover { 
    background-color: green !important; 
} 

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

 
.navbar-default { 
 
    background-color: blue; 
 
    border-color: #e7e7e7; 
 
} 
 

 
@media (min-width: 768px) { 
 
.navbar-nav>li>a { 
 
    padding-top: 15px; 
 
    padding-bottom: 4px; 
 
}} 
 

 

 
.navbar-default .navbar-nav>li>a { 
 
    color:white; 
 
    FONT-SIZE: 12pt; 
 
    TEXT-DECORATION: none; 
 
    FONT-FAMILY: Arial; 
 
    WHITE-SPACE: nowrap; 
 
    DISPLAY: block; 
 
} 
 

 
.navbar-default .navbar-nav > li > a:hover, 
 
.navbar-default .navbar-nav > li > a:focus { 
 
    color: #333; 
 
    background-color: transparent; 
 
} 
 

 
.navbar-nav .open .dropdown-menu > li > a:hover, 
 
    .navbar-nav .open .dropdown-menu > li > a:focus { 
 
    background-color: green; 
 
    } 
 

 
.navbar-nav > li > a{ 
 
    padding-left:2px; 
 
    padding-right:2px; 
 
    margin-left:2px; 
 
    margin-right:2px; 
 
} 
 

 
.navbar-toggle:hover { 
 
    background-color: green !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid" style="padding-left:2px;"> 
 
    <div class="navbar-header"> 
 
     
 
    
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu0 <b class="caret"></b></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#" style="cursor:pointer">Menu1</a></li> 
 
      <li><a href="#">Menu2</a></li> 
 
      <li><a href="#">Menu3</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav" > 
 
     <li ><a></a></li> 
 
     </ul> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Menu4</a></li> 
 
     
 
     
 
     </ul> 
 
     
 
    </div> 
 
    
 
    </div> 
 
</nav>

Answer 4

相反的：

.navbar-nav .open .dropdown-menu > li > a:hover, 
.navbar-nav .open .dropdown-menu > li > a:focus { 
    background-color: green; 
} 

你應該放下.open選擇，就像這樣：

.navbar-nav .dropdown-menu > li > a:hover, 
.navbar-nav .dropdown-menu > li > a:focus { 
    background-color: green; 
} 

這是因爲ul的元素（navbar-nav類）下有與類open沒有元素，所以這就是爲什麼綠色背景ISN不適用。在此jsFiddle

Answer 5

工作代碼試試這個代碼花花公子....

這裏是演示Codepen

$(function() { 
 
     $(".navbar-toggle").hover(
 
      function(){ $('.collapse').addClass('in') } 
 
      
 
     ); 
 
    }); 
 

 
$(function() { 
 
     $(".dropdown").hover(
 
      function(){ $(this).addClass('open') }, 
 
      function(){ $(this).removeClass('open') }, 
 
      function(){ $('.collapse').removeClass('in') } 
 
     ); 
 
    }); 
 
$(function() { 
 
     $("html").click(
 
      function(){ $('.collapse').removeClass('in') } 
 
     ); 
 
    });

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover > .collapse { 
 
    display: block; 
 
} 
 

 
.navbar-default { 
 
    background-color: blue; 
 
    border-color: #e7e7e7; 
 
} 
 

 

 
.navbar-nav>li>a { 
 
    padding-top: 15px; 
 
    padding-bottom: 4px; 
 
} 
 

 

 
.navbar-default .navbar-nav>li>a { 
 
    color:white; 
 
    FONT-SIZE: 12pt; 
 
    TEXT-DECORATION: none; 
 
    FONT-FAMILY: Arial; 
 
    WHITE-SPACE: nowrap; 
 
    DISPLAY: block; 
 
} 
 

 
.navbar-collapse{ 
 
    background:green; 
 
} 
 

 
.navbar-nav > li > a{ 
 
    padding-left:2px; 
 
    padding-right:2px; 
 
    margin-left:2px; 
 
    margin-right:2px; 
 
} 
 

 
.navbar-nav{ 
 
    margin:0px 0px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<body> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid" style="padding-left:2px;"> 
 
    <div class="navbar-header"> 
 
     
 
    
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu0 <b class="caret"></b></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#" style="cursor:pointer">Menu1</a></li> 
 
      <li><a href="#">Menu2</a></li> 
 
      <li><a href="#">Menu3</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav" > 
 
     <li ><a></a></li> 
 
     </ul> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Menu4</a></li> 
 
     
 
     
 
     </ul> 
 
     
 
    </div> 
 
    
 
    </div> 
 
</nav> 
 
</body>