Невозможно изменить стили выпадающего меню nav-bar

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-nav>li>.dropdown-menu 

так

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

Якорные метки внутри выпадающие определяется здесь:

.dropdown-menu>li>a 

так

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

Bootstrap Theme хорошая страница, чтобы играть вокруг с этим материалом - только открытые инструменты Dev и начать изменять вещи.