html - 无法更改导航栏下拉样式

Question

我正在尝试将导航栏下拉菜单的背景颜色更改为黑色。我还试图使下拉选项成为屏幕的宽度。

出于某种原因，除了透明之外，我完全无法更改下拉菜单背景。我尝试了下面的代码，但它什么也没做。

/*-- change navbar dropdown color --*/
  .navbar-default .navbar-nav .open .dropdown-menu>li>a,.navbar-default .navbar-nav .open .dropdown-menu {
    background-color: #3344ff;
    color:#ffffff;
  }

这是我的代码:

    .navbar-inverse {
        background: #F8F9FA;
        border: none;
        color: black;
        height: 7em;


    }

    .navbar-inverse a{
        color: #7B53C1!important;
    }

    .navbar-toggle {
      border: none;
      background: transparent !important;
    }
    .navbar-toggle:hover {
      background: transparent !important;

    }
    .navbar-toggle .icon-bar {
      width: 25px;
      height: 3px;
      transition: all 0.2s;
      background: black !important;
      margin-top: 25px;
    }
    .navbar-toggle .top-bar {
      transform: rotate(45deg);
      transform-origin: 10% 10%;
    }
    .navbar-toggle .middle-bar {
      opacity: 0;
    }
    .navbar-toggle .bottom-bar {
      transform: rotate(-45deg);
      transform-origin: 10% 90%;
    }
    .navbar-toggle.collapsed .top-bar {
      transform: rotate(0);
    }
    .navbar-toggle.collapsed .middle-bar {
      opacity: 1;
    }
    .navbar-toggle.collapsed .bottom-bar {
      transform: rotate(0);
    }

HTML

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
    <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" href="#collapse1" data-target="#navbar" aria-expanded="false" aria-controls="navbar">


 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar top-bar"></span>
  <span class="icon-bar middle-bar"></span>
  <span class="icon-bar bottom-bar"></span>
 </button>



        <a id='' class="header navbar-brand" href="/">
            <p id='mainTitle'>JobQuiz </p>
        <!--<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Playbuzz_Logo_(2016).svg/2000px-Playbuzz_Logo_(2016).svg.png' style="width:25x;height:25px;">-->
        </a>
        </div>

        <div id="navbar" class="collapse navbar-collapse" data-target="#collapse1">
         <ul class="nav navbar-nav">
        <!--<li class="active"><a href="#">Home</a></li>-->
        <!--<li><a href="#about">About</a></li>-->
        <!--<li><a href="#contact">Contact</a></li>-->
      </ul>
        <ul class="nav navbar-nav navbar-right"> 
        <li class='headerBtn'> <button  id="headerBtn">Start Quiz</button></li>
        <!--The if statemnet below along with the currentUser varriable is how we're passing the user name into the navbar-->
       <% if(!currentUser){ %>
        <li class='header'> <a href="/login"> Sign In</a></li>
        <li class='header'> <a href="/register"> Sign Up </a></li>
      <% } else{ %>
        <li> <a href ="#">Signed In As: <%= currentUser.username%> </a></li>
        <li> <a href="/logout"> Log Out </a></li>
     <%  } %>


            </ul>
        </div>
    </div>
</nav>

Answer 1

Bootstrap对navbar下拉元素的具体定义定义在这里:

.navbar-nav>li>.dropdown-menu

所以

.navbar-nav>li>.dropdown-menu {
    background-color: #3344ff;
}

下拉列表中的 anchor 标记在这里定义:

.dropdown-menu>li>a

所以

.dropdown-menu>li>a {
    color: #FFF;
}

Bootstrap Theme是玩这些东西的好页面 - 只需打开 Dev Tools 并开始更改。