title: Maintaining the hover state background color while hovering its submenu items
body: <p>I am creating a navigation menu with list items <code>a</code>, <code>b</code>, <code>c</code>, <code>d</code>, <code>e</code>, <code>f</code>.</p>
  
  <p>When a user hovers the list <code>d</code>, the submenu items appears inside <code>d</code> as <code>d1</code>,<code>d2</code>,<code>d3</code>,<code>d4</code> and <code>d5</code> respectively.</p>
  
  <p>The <code>d</code> menu has a background color on hover, but when the users hover on its sub menu items, the background color of <code>d</code> disappears.</p>
  
  <p>What I want is that when the users are hovering the subitems, the hover color should stay on <code>d</code> and only disappears once the user mouse outs of its submenu items.</p>
  
  <p>Here is my <code>code</code>.</p>
  
  <p><strong>The JSFiddle:</strong>
  <a href="http://jsfiddle.net/mm9QN/" rel="nofollow">http://jsfiddle.net/mm9QN/</a></p>
  
  <p><strong>The HTML:</strong></p>
  
  <pre><code>             &lt;ul class="nav navbar-nav"&gt;
                  &lt;li class="active"&gt;&lt;a href="#"&gt;a&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;b&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;c&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="dropdown"&gt;
                    &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;d&lt;/a&gt;
                    &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;d1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;d2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;d3&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;d4&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;d5&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;e&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;f&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
  </code></pre>
  
  <p><strong>The CSS:</strong>
  I am using the twitter bootstrap, so cannot paste the full css code, so below is the link for the same.</p>
  
  <p><a href="http://getbootstrap.com/dist/css/bootstrap.css" rel="nofollow">http://getbootstrap.com/dist/css/bootstrap.css</a></p>
  
  <p>I wanted hover menus instead of click, so here is the code for the same</p>
  
  <pre><code>ul.nav li.dropdown:hover &gt; ul.dropdown-menu {
      display: block;    
  }
  </code></pre>
  
  <p>Awaiting Solutions.</p>