title: CSS Style Select Active Menu Item Differently Than Others on Hover
body: <p>The following HTML is created by Joomla 1.7 for the menu of a site I'm working on:</p>
  
  <pre><code>&lt;ul class="menu-tabbed-horiz"&gt;
  
  &lt;li class="item-435 current active parent"&gt;
      &lt;a class="firstmenuitem" href="/joomla/" &gt;Home&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="item-467"&gt;
      &lt;a href="/joomla/index.php/menu2" &gt;Menu 2&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="item-468"&gt;
      &lt;a href="/joomla/index.php/memu3" &gt;Menu 3&lt;/a&gt;
  &lt;/li&gt;
  
  &lt;/ul&gt;
  </code></pre>
  
  <p>Via CSS, I'm styling this menu. For example, I style the menu item that the mouse is hovering over like this: <code>.menu-tabbed-horiz a:hover</code>. The active one can be styled like so: <code>.menu-tabbed-horiz .current  a</code>.</p>
  
  <p>This works without problem, but now I would like to style a menu item differently when it is the current one and hovered on than when it is just hovered on. Something like <code>.menu-tabbed-horiz a:hover &amp;&amp; !.current</code>, but that obviously does not work.</p>
  
  <p>Any suggestions would be appreciated, Fabian</p>