使用引導程序更改單擊的導航欄下拉列表的顏色

Question

再次單擊配置文件圖標以擺脫菜單時，除非您單擊其他位置，否則它不會變回導航欄顏色。 我認為這是控制鏈接的導航欄 css 之一的問題，但我很難找到它是哪一個。

HTML：

<nav class='navbar navbar-default.navbar-static-top navbar-custom'>
  <div class='container-fluid'>
    <ul class='nav navbar-nav navbar-left'>
      <li><a href="dashboard.html">Dashboard</a></li>
      <li><a href="/grades">Grades</a></li> 
      <li><a href="/classes">Classes</a></li>
    </ul>
    <ul class='nav navbar-nav navbar-right'>
      <li><a href="/messages"><i class="fa fa-envelope fa-lg"></i></a></li>

        <!--probably has to do with the link, clicking it then clicking it again-->
      <li><a class="dropdown-toggle dropdown-custom" data-toggle="dropdown" href="/profile"><i class="fa fa-user fa-lg"></i></a>
        <ul class="dropdown-menu">
          <li><a href="/profile.html">Edit profile</a></li>
          <li><a href="/settings">Edit Preferences</a></li>
        </ul>
      </li>
      <li><a href="/logout"><i class="fa fa-power-off fa-lg"></i></a></li>    
    </ul>

  </div>
</nav>

CSS：

.navbar-custom {
    background-color: #586F7C;
}
.navbar-custom a {
    color: #F4F4F9;
}
.navbar-custom a:hover {
    color: #F4F4F9;
}
.navbar-custom .nav > li > a:hover {
    background-color: #2F4550;
}
.navbar .navbar-nav > li.open > a {
    background-color: #586F7C;
}
.navbar .navbar-nav > li.open > a:hover,
.navbar .navbar-nav > li.open > a:focus {
    background-color: #2F4550;
}

編輯：這是它的樣子。 http://i.stack.imgur.com/tvWD0.gif

如果您在導航欄外部單擊以擺脫菜單，那很好。 當您再次單擊圖標以擺脫菜單，然后將鼠標移到圖標框外時，就會出現問題。

Edit2: ng-include 在導航欄被引用的文件中

<div ng-include="'html/navbar.html'"></div>

Edit3：index.html 的一部分，它引用了導航欄包含在其中的文件

<body>
 <div class="view-container">
     <div ng-view class="view-frame"></div>
 </div>
</body>

Edit4：原來的問題已經修復！ 但是，現在的問題是如果在單擊菜單外時按住鼠標，閃光燈仍然存在：

Answer 1

這是您的代碼的固定版本：

https://jsfiddle.net/6psjb0c5/

我添加了以下似乎解決了該行為的內容：

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

Answer 2

消除：

.navbar-custom a:hover {
color: #F4F4F9;
}

這應該夠了吧

Answer 3

好吧，我來自巴西，以防有些話沒有意義。 我遇到了同樣的問題，但是如果您檢查代碼並在外部執行單擊和單擊操作，您會注意到添加了 .open 類。 但是，下拉菜單是 a (a) 而不是 a ( li > a)。 很快，代碼如下：

.nav .open a, .nav .open a:focus, .nav .open a:active {
 background-color: #2F4550; /*background-color: trasparent;*/
}

使用引導程序更改單擊的導航欄下拉列表的顏色

問題描述

3 個解決方案

解決方案1
3 已采納 2016-03-21 19:54:58

解決方案2
0 2016-03-21 19:34:59

解決方案3
0 2017-04-06 12:40:40

使用引導程序更改單擊的導航欄下拉列表的顏色

問題描述

3 個解決方案

解決方案1 3 已采納 2016-03-21 19:54:58

解決方案2 0 2016-03-21 19:34:59

解決方案3 0 2017-04-06 12:40:40

解決方案1
3 已采納 2016-03-21 19:54:58

解決方案2
0 2016-03-21 19:34:59

解決方案3
0 2017-04-06 12:40:40