title: CSS menu hide current submenu when other menu item is hovered
body: <p>I'm designing a new website, but I currently have the following problem:</p>
  
  <p>In the menu, when the I open a page with a sub menu, and then hover a menu item without sub menu I want to display an empty gray bar. But I've got no clue how to do this.
  To reproduce this go to this page: <a href="http://www.kvvikingvenlo.nl/joomla/nl/aluminium-gietwerk.html" rel="nofollow">http://www.kvvikingvenlo.nl/joomla/nl/aluminium-gietwerk.html</a> and then hover over the home item in the menu. (Home has no sub menu, so I want the gray bar to be empty.)</p>
  
  <p><strong>Edit</strong></p>
  
  <p>I'm sorry, my question seems to be quite hard to understand. Lets try again:</p>
  
  <p>On the web page <a href="http://www.kvvikingvenlo.nl/joomla/nl/aluminium-gietwerk.html" rel="nofollow">http://www.kvvikingvenlo.nl/joomla/nl/aluminium-gietwerk.html</a> there is a menu which is always displays the current sub menu, until you hover a different sub menu. This part is already working.</p>
  
  <p>But when you hover Home, you will still see:"ONTWIKKELING, HOGEDRUK SPUITGIETEN, CNC-NABEWERKING and MONTAGE".</p>
  
  <p>These are the sub menu items of the parent "Processen" (which is the current active one)</p>
  
  <p>Because home does not have any sub menu items, i want this bar to be empty instead.</p>