html - Bootstrap 导航栏下拉按钮事件颜色的问题

Question

这是我的导航栏的图片。请注意在事件时如何仅在家下划线...

这是我的导航栏的另一张图片。不幸的是，下拉菜单处于事件状态时会突出显示为这种颜色，而且我尝试过的所有 css 都无法修复它。它应该像上面的所有背景一样具有透明背景。任何帮助是极大的赞赏。

这是我的导航栏 html...

<nav role="navigation" class="navbar navbar-default navbar-fixed-top font">
  <div class="container">

    <!-- Title -->
    <div class="navbar-header pull-left">
      <div class="navbar-brand-image"> <%=link_to "#{image_tag 'rsz_1rsz_13logo.png'}".html_safe ,root_path %></div>
    </div>

    <button id="nav-icon1" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">

      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>

    </button>


    <!-- Additional navbar items -->
    <div class="collapse navbar-collapse navbar-right navHeaderCollapse">
      <!--                      pull-right keeps the drop-down in line -->
      <ul class="nav navbar-nav">

          <li class="<%= 'active' if current_page?(root_path) %>"><% yield (:home)%><%= link_to "Home", root_path%></li>
        <li class="<%= 'active' if current_page?(services_path) %>"><% yield (:services)%><%= link_to "Services", services_path%></li>
        <li class="<%= 'active' if current_page?(careers_path) %>"><% yield (:careers)%><%= link_to "Careers", careers_path%></li>
          <li class="<%= 'active' if current_page?(contact_path) %>"><% yield (:contact)%><%= link_to "Contact Us", contact_path %>
          <li class="<%= 'active' if current_page?(about_us_path) %>"><% yield (:about_us)%><%= link_to "About Us", about_us_path%></li>
        <li class="dropdown nav-drop">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Language <span class="caret"></span></a>
          <ul class="dropdown-menu" style="  background-color: rgba(54,54,54, .6);">
            <li><a href="/">English</a></li>
            <li><a href="/de/home">German</a></li>
            <li class="disabled"><a href="#">Spanish - Coming Soon</a></li>
          </ul>
        </li>
        </ul>
      </ul>
    </div>

Answer 1

Bootstrap 的 .open 类覆盖了很多 CSS 规则，所以你需要提供一个特殊的规则，比如:

.open > .dropdown-toggle {
  background: transparent;
}

您可能还必须使用 !important 声明。