title: Use CSS to keep the top-level navigation hover effect on when the mouse is over the sub-menu
body: <p>When you mouseover a navigation item, the colour of the link changes to white and background of that link goes black.  The hover state does a display:block on a hidden nested .  When I move the mouse over to the nested  (i.e. the sub menu), the hover state on the top-level nav returns back to the way it was.  How do I make it persist whilst my mouse is over the sub-menu?</p>
  
  <p>In other words, when I hover the link 'What we do', the font color changes to #fff and background to #111 and the ul.sub-menu appears with the same black background and white text.  This all appears whilst my mouse hovers over 'What we do', but as soon as it moves to the sub-menu, the background on 'What we do' returns to its original color and font color changes back to black.  Meanwhile my sub-menu remains open in the correct format.  How do I get the 'state' to persist when I move the mouse hover away?</p>
  
  <p>Here is a jsfiddle for it: <a href="http://jsfiddle.net/U77re/" rel="nofollow">http://jsfiddle.net/U77re/</a></p>
  
  <pre><code>nav ul#menu-top-nav { position: absolute; top: 35px; left: 113px; padding: 16px 30px 17px 20px; width: 797px; background: #F0F1F4;}
  nav ul#menu-top-nav li { position: relative; float: left; margin: 0 40px 0 0; }
  nav ul#menu-top-nav li a:hover { color: #fff; background: #111;  }
  nav ul#menu-top-nav li#menu-item-1186 { margin-right: 0; }
  nav ul#menu-top-nav ul.sub-menu { display: none; }
  nav ul#menu-top-nav ul.sub-menu li a { margin: 0; }
  
  nav ul#menu-top-nav li:hover ul.sub-menu { display: block; position: absolute; left:0; top: 30px; width: 250px; padding: 20px;
                                      z-index: 1; background: #111; }
  
  nav ul#menu-top-nav  ul.sub-menu p { margin: 0 0 25px 0; color: #fff; line-height: 1.4; font-weight: bold; }
  nav ul#menu-top-nav  ul.sub-menu li { width: 250px; margin: 0 0 20px 20px; color: #fff; list-style-position: inside; list-style-type: disc;  }
  nav ul#menu-top-nav  ul.sub-menu li a { color: #fff;  }
  
  &lt;nav role="navigation"&gt;
      &lt;ul class="menu" id="menu-top-nav"&gt;
      &lt;li id="menu-item-1596"&gt;&lt;a href="http://localhost:8888/what-we-do/"&gt;What we do&lt;/a&gt;
          &lt;ul class="sub-menu"&gt;
              &lt;p&gt;Explore what we do and the people behind it&lt;/p&gt;
              &lt;li id="menu-item-1600"&gt;&lt;a href="/what-we-do/about/"&gt;About IFSW&lt;/a&gt;&lt;/li&gt;
              &lt;li id="menu-item-1604"&gt;&lt;a href="/what-we-do/partners/"&gt;Partners&lt;/a&gt;&lt;/li&gt;
              &lt;li id="menu-item-1601"&gt;&lt;a href="/what-we-do/contact/"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>