title: Hover on nested item can affect its parent?
body: <p>I have a menu using pure CSS, hover a parent <code>li</code> item display the the nested list. A simplified example:</p>
  
  <pre><code>  &lt;ul id="menu-top" &gt;
      &lt;li class="menu-item"&gt;
        &lt;a href="http://localhost/wp5/forums/"&gt;Forums&lt;/a&gt;
        &lt;ul class="sub-menu"&gt;
          &lt;li&gt;&lt;a href="http://localhost/wp5/register/"&gt;Register&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="http://localhost/wp5/activate/"&gt;Activate&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="http://localhost/wp5/members/"&gt;Members&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  
  <p>The css:</p>
  
  <pre><code>.navigation ul.menu li:hover { background: #ccc} //hover the parent item changes it bg color
  
  .navigation ul.sub-menu li {
   display:none;
  }
  
  .navigation ul li:hover &gt; ul.sub-menu li { display: block; }
  </code></pre>
  
  <p>It works ok, but I'm trying to add an "persistent" effect, I want keep the parent style set when hovering also the sub-item.</p>
  
  <p>I tried this but can't get working: </p>
  
  <pre><code>.navigation ul.sub-menu li:hover &gt; .navigation ul.menu li { background: #ccc}
  </code></pre>
  
  <p>I don't know if this is possible without javscript or else, also can't find anything about using ">" in CSS.</p>
  
  <p>THanks for any help</p>