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