ブートストラップでは、親がトランスペアレントなドロップダウンメニューのヘッダーの背景色をどのように変更しますか？

Question

私はインターネット全体を検索しましたが、解決策はありません。

私は何をしようとしていますか？

ドロップダウンメニューのヘッダーの背景色を変更したいとします。

https://ibb.co/cthhTk

HTML：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" 
        data-target=".navbar-collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#"> Blackbird </a> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#"> Search </a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Sign In/Up <b class="caret"></b></a> 
        <ul class="dropdown-menu" class="dropdownMenu"> 
         <li><a href="#"> Sign Up </a></li> 
         <li><a href="#"> Sign In </a></li> 
        </ul> 
       </li> 
      </ul> 
      <ul class="nav navbar-nav navbar-left"> 
       <li class="seperator"><a href="#" class="not-active"></a></li> 
       <li><a href="#"> Article </a></li> 
       <li><a href="#"> Contact </a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

CSS：

/* Neither does this work: */ 

.dropdown { 

    background-color: #E32636; 
} 

/* Nor this: */ 

/* .navbar .navbar-default .navbar-nav .dropdown-menu li > a { 

     background-color: #E32636; 
    } 
*/ 

Answer 1

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">    
    <div class="container">     
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" 
         data-target=".navbar-collapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button>              
       <a class="navbar-brand" href="#"> Blackbird </a> 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="#"> Search </a></li> 
        <li class="dropdown"> 
         <a href="#" id="authentication" class="dropdown-toggle" data-toggle="dropdown"> Sign In/Up <b class="caret"></b></a> 
         <ul class="dropdown-menu" class="dropdownMenu"> 
          <li><a href="#"> Sign Up </a></li> 
          <li><a href="#"> Sign In </a></li> 
         </ul> 
        </li>       
       </ul>     
       <ul class="nav navbar-nav navbar-left"> 
        <li class="seperator"><a href="#" class="not-active"></a></li> 
        <li><a href="#"> Article </a></li> 
        <li><a href="#"> Contact </a></li> 
       </ul> 
      </div>  
    </div>  
</nav> 

を確認することができます。その後、

と、それにそう

#authentication{ 
    background-color: #f60; 
} 

か、あなたが本当にしたいが、新規IDやクラスを追加いけない場合、あなたは

navbar navbar-collapse>ul>li:nth-child(2)>a{ 
    background-color: #f60; 
} 

、のようなものとして要素を照会することができますが、背景色を追加

Answer 2

チェックこの作業コード：

.navbar-nav > li.dropdown.open a, .navbar-nav > li.dropdown.open a:focus, .navbar-nav > li.dropdown.open a:hover{ 
 
    background-color: #E32636; 
 
} 
 
.navbar-nav > li > .dropdown-menu { 
 
    background-color: #E32636;    
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">    
 
    <div class="container">     
 
      <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle" data-toggle="collapse" 
 
         data-target=".navbar-collapse"> 
 
        <span class="sr-only">Toggle navigation</span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button>              
 
       <a class="navbar-brand" href="#"> Blackbird </a> 
 
      </div> 
 
      <div class="navbar-collapse collapse"> 
 
       <ul class="nav navbar-nav navbar-right"> 
 
        <li><a href="#"> Search </a></li> 
 
        <li class="dropdown"> 
 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Sign In/Up <b class="caret"></b></a> 
 
         <ul class="dropdown-menu" class="dropdownMenu"> 
 
          <li><a href="#"> Sign Up </a></li> 
 
          <li><a href="#"> Sign In </a></li> 
 
         </ul> 
 
        </li>       
 
       </ul>     
 
       <ul class="nav navbar-nav navbar-left"> 
 
        <li class="seperator"><a href="#" class="not-active"></a></li> 
 
        <li><a href="#"> Article </a></li> 
 
        <li><a href="#"> Contact </a></li> 
 
       </ul> 
 
      </div>  
 
    </div>  
 
</nav>

また、私がサインイン/サインアウトメニューを開くハイパーリンクにIDを追加した。この作業Fiddle