[jQuery] Re: Superfish Question

[Schalk Neethling]

Awesome, glad I could help out.

twinskies...@gmail.com wrote:

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&trade;</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

begin:vcard
fn:Schalk Neethling
n:Neethling;Schalk
org:Overt Strategy Consulting
adr:Florauna;;Berg ave 642;Pretoria;Gauteng;0182;South Africa
email;internet:sch...@overtstrategyconsulting.com
title:President
tel;work:+27125468436
x-mozilla-html:FALSE
url:http://www.overtstrategyconsulting.com
version:2.1
end:vcard