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>