Hi,
Here's my Superfish menu:
********************
[code]
<ul class="sf-menu">
<li>
<a href="/cave"
class="sf-menu-tab-img"><img src="/images/
tab_cave.gif" onmouseover="this.src='/images/tab_cave_hover.gif'"
onmouseout="this.src='/images/tab_cave.gif'" alt="The Cave" title="The
Cave"></a>
</li>
<li>
<a href="/archives"
class="sf-menu-tab-img"><img src="/images/
tab_archives.gif" onmouseover="this.src='/images/
tab_archives_hover.gif'" onmouseout="this.src='/images/
tab_archives.gif'" alt="The Archives" title="The Archives"></a>
</li>
<li>
<a href="/explore"
class="sf-menu-tab-img"><img src="/images/
tab_explore.gif" onmouseover="this.src='/images/
tab_explore_hover.gif'" onmouseout="this.src='/images/
tab_explore.gif'" alt="Explore" title="Explore"></a>
</li>
<li>
<a href="/cove"
class="sf-menu-tab-img"><img src="/images/
tab_cove.gif" onmouseover="this.src='/images/tab_cove_hover.gif'"
onmouseout="this.src='/images/tab_cove.gif'" alt="Your Cove"
title="Your Cove"></a>
</li>
<li class="current">
<a href="/profile/me"
class="sf-menu-tab-img"><img src="/images/
tab_profile.gif" onmouseover="this.src='/images/
tab_profile_hover.gif'" onmouseout="this.src='/images/
tab_profile.gif'" alt="Your Profile" title="Your Profile"></a>
<ul>
<li>
<a
href="#aa">Your Profile</a>
</li>
<li>
<a
href="#ab">Your Friends (<b>2</b>)</a>
</li>
<li>
<a
href="#ac">eggShout™</a>
</li>
</ul>
</li>
</ul>
[/code]
********************
What I am trying to do is have the HOVER background color for the top
level li be different than the rest of the li hovers. The default CSS
code:
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #93a28d;
outline: 0;
}
is what triggers the background color change. But that applies it
globally, to all li and a elements within the Superfish menu. How can
I change the hover background color for just the TOP LEVEL LI and rest
of the li's have the #93a28d hover (above)?
Best,
Ian
