title: CSS: How to set hover effect on menu-item when submenu-item is displayed
body: <p>Sorry with title if it is not looks bad, I don't know how can I write the title for my issue.</p>
  
  <p>So I have a menu bar with some menu-items and submenu-items as:</p>
  
  <pre><code>&lt;div id="mainmenu"&gt;
  &lt;ul id="menu"&gt;
      &lt;li&gt;&lt;a class="current" href=""&gt;Menu1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Menu2&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href=""&gt;Submenu1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;Submenu2&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Menu3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Menu4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is <a href="http://jsfiddle.net/bk2HA/" rel="nofollow">the fiddle</a> of what I have done so far.</p>
  
  <p>What I want is to keep the <em>menu-item</em> also in <code>:hover</code> state if its <em>submenu-item</em> is being hover, such as If my mouse is on <code>submenu</code> or <code>submenu2</code> the <code>Menu2</code> should also be <em>darkened</em>. How can I do this with CSS?</p>
  
  <p>I hope I am clear with my question.</p>
  
  <p>EDIT:</p>
  
  <p>Wooo thanks a lot every-one.</p>
  
  <p>got it with: <code>#menu li:hover</code></p>
  
  <pre><code>#menu li:hover,#menu a:hover,#menu &gt; li a.current{
  
  } ​
  </code></pre>