title: How to change the background color of a bootstrap dropdown as long as the dropdown menu remains open?
body: <p>Edit: I fixed the spelling error I had and it doesnt work. Any solution is greatly appreciated.</p>
  
  <p>I am using megamenu for my bootstrap template which makes the width of the dropdown menus 100% of the screen size.</p>
  
  <p>Anyway, the question is regarding the navigation bar on top. It looks like this : </p>
  
  <p><a href="https://i.stack.imgur.com/cUhU8.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cUhU8.jpg" alt="enter image description here"></a></p>
  
  <p>When I move my cursor to one of the links on the navigation bar, say Articles, the dropdown menu opens as it is set to do so on hover : </p>
  
  <p><a href="https://i.stack.imgur.com/Ztrsn.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ztrsn.jpg" alt="enter image description here"></a></p>
  
  <p>As you can see, the color of the link gets darker on hover, that is, the dropdown menu opens up and the color darkens when the cursor is placed on the link in the navigation bar.</p>
  
  <p>However, if the user moves the cursor to the dropdown menu, the menu remains open, which is fine, but the color of the link changes back to its original color like so: </p>
  
  <p><a href="https://i.stack.imgur.com/OW0w0.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OW0w0.jpg" alt="enter image description here"></a></p>
  
  <p>I don't want that to happen, I want to make my template in a way that the color remains dark as long as the dropdown menu remains open. How exactly do I do this using CSS?</p>
  
  <p>My html looks like this (for the Article link): </p>
  
  <pre><code>&lt;div class="navbar-collapse collapse navbar-right"&gt;
      &lt;ul class="nav navbar-nav"&gt;
  
          &lt;li class="dropdown menu-large"&gt;
              &lt;a href="#" class="dropdown-toggle disabled" data-
              toggle="dropdown"&gt;Articles&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;       
              &lt;ul class="dropdown-menu megamenu row"&gt;
              .....
              &lt;/ul&gt;
  </code></pre>
  
  <p>I make it open on hover using the css:</p>
  
  <pre><code>.dropdown:hover .megamenu {
    display: block;
   }
  </code></pre>
  
  <p>And I make the background color darker on hover using the css:</p>
  
  <pre><code>.navbar-default .navbar-nav .dropdown .dropdown-toggle:focus,
  .navbar-default .navbar-nav .dropdown .dropdown-toggle:hover,
  .navbar-default .navbar-nav .dropdown .dropdown-toggle:active {
    color: #fff;
    background-color: #16a085;
  }
  </code></pre>
  
  <p>I am pretty sure the active one is unnecessary here.</p>
  
  <p>So any idea on how I can do this?</p>