Thank you for your help! I got it working! For future reference,
here's the CSS code I ended up using:
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #1a2618;
outline: 0;
}
.sf-menu li ul li:hover, .sf-menu li ul li li.sfHover,
.sf-menu li ul li a:focus, .sf-menu li ul li a:hover, .sf-menu li ul
li a:active {
background: #93a28d;
outline: 0;
}
The first block is for the TOP LEVEL LI. The second block is for
everything else below it (hierarchically speaking).
Ian
On Apr 5, 7:09 pm, Schalk Neethling <volume4.sch...@gmail.com> wrote:
> Hi there Ian,
>
> Your best bet would be to target your second level li and a's
> specifically so that you end up with the default as you currently have
> it but then also:
>
> .sf-menu li ul li, .sf-menu li ul li a
> {
> background-color:#330; /* different from the top level */
>
> }
>
> You can of course also target all the various states such as hover,
> focus etc.
>
> HTH,
> Schalk
>
>
>
> Tipem wrote:
> > 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
>
>
>
> volume4_schalk.vcf
> < 1KViewDownload
