如何更改下拉菜单的背景颜色？

Question

I can't get the background colour of my dropdown to change when it's open.

My CSS code is

.dropdown.open {
  background-color: black;
}

My HTML is

<ul class="nav navbar-nav navbar-right">
    <li><a href="#web-hidden" onClick="TypeWeb()">WEB DEVELOPMENT</a></li>
    <li><a href="#programming-hidden" onClick="TypeProgramming()">PROGRAMMING</a></li>
    <li><a href="#design-hidden" onClick="TypeDesign()">DESIGN</a></li>     
    <li><a href="#game-hidden" ></a></li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"
           role="button" aria-haspopup="true" aria-expanded="false"
           onClick="TypeGameDesign()">
            GAME DEVELOPMENT
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">Unity3D</a></li>
          <li role="separator" class="divider"></li>
          <li class="dropdown-header">Coming...</li>
          <li><a href="#">UE4</a></li>
          <li><a href="#">VR</a></li>
        </ul>
    </li>
</ul>

Answer 1

The background color belongs to the a . So, use this:

.dropdown.open > a {
  background-color: #000 !important;
}