更改下拉菜单的颜色当点击和悬停时

问题描述：

当我点击它时，我的下拉菜单将返回到navbar-default的颜色。当我将鼠标悬停在下拉菜单中的项目上时，它们也会回到navbar-default的颜色。更改下拉菜单的颜色当点击和悬停时

这里是我的意思图片：

这里是我的HTML：

<div class="collapse navbar-collapse navHeaderCollapse"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#">Home</a></li> 
      <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Internet<span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Cable</a></li> 
        <li><a href="#">DSl</a></li> 
        <li><a href="#">Wireless</a></li> 
        <li><a href="#">Business Cable</a></li> 
        <li><a href="#">Business DSL</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Phone</a></li> 
      <li><a href="#">Android TV</a></li> 
      <li><a href="#">Shaw Direct</a></li> 
      <li><a href="#">Careers</a></li> 
     </ul> 
    </div>

这是我的CSS：

.navbar-default { 
    background-color: #00AEFE; 
} 
.navbar-default:visited { 
    background-color: #00AEFE; 
} 
ul.dropdown-menu { 
    background-color: #00AEFE; 
} 
ul.dropdown-menu:hover { 
    background-color: #00AEFE; 
}

尝试增加'important'像'背景颜色：＃！00AEFE重要;'这将迫使该特定的风格是最重要的。 –

[在Twitter Bootstrap 3中更改导航栏颜色]可能的重复项目（http://stackoverflow.com/questions/18529274/change-navbar-color-in-twitter-bootstrap-3） – vanburen

您还没有提出任何问题，或包含足够的CSS来解决任何问题。如果你正在谈论你点击一个元素时看到的颜色（当左键点击时），这就是'：active'伪类。 –

答

根本就这个与覆盖引导类

.nav .open > a, .nav .open > a:focus, .nav .open > a:hover { 
    background-color: #00AEFE; 
} 
.nav > li > a:focus, .nav > li > a:hover { 
    background-color: #00AEFE; 
}

检查片段是你需要什么？运行段，然后切换到全屏模式，然后检查

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<style> 
 
ul.dropdown-menu { 
 
    background-color: #00AEFE; 
 
} 
 
ul.dropdown-menu:hover { 
 
    background-color: #00AEFE; 
 
} 
 
.nav .open > a, .nav .open > a:focus, .nav .open > a:hover { 
 
    background-color: #00AEFE; 
 
} 
 
.nav > li > a:focus, .nav > li > a:hover { 
 
    background-color: #00AEFE; 
 
} 
 

 
</style> 
 
<div class="collapse navbar-collapse navHeaderCollapse"> 
 
     <ul class="nav navbar-nav"> 
 
      <li><a href="#">Home</a></li> 
 
      <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Internet<span class="caret"></span></a> 
 
       <ul class="dropdown-menu"> 
 
        <li><a href="#">Cable</a></li> 
 
        <li><a href="#">DSl</a></li> 
 
        <li><a href="#">Wireless</a></li> 
 
        <li><a href="#">Business Cable</a></li> 
 
        <li><a href="#">Business DSL</a></li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#">Phone</a></li> 
 
      <li><a href="#">Android TV</a></li> 
 
      <li><a href="#">Shaw Direct</a></li> 
 
      <li><a href="#">Careers</a></li> 
 
     </ul> 
 
    </div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

更改下拉菜单的颜色当点击和悬停时

相关推荐