OK - remove that last bit re:
.sf-menu li { background: transparent; } /*top level*/
.sf-menu li li { background: #F0F; } /*second level*/
.sf-menu li li li { background: #000; } /*third level*/
I think given the spans and extra classes you have added you'll need
to do this...
Change in your superfish.css file to this:
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu li a:focus, .sf-menu li a:hover, .sf-menu li a:active
{
background: transparent;
outline: 0;
}
.sf-menu li li:hover, .sf-menu li li.sfHover,
.sf-menu li li a:focus, .sf-menu li li a:hover, .sf-menu li li
a:active
{
background: #AABDE6;
outline: 0;
}
.sf-menu li li li:hover, .sf-menu li li li.sfHover,
.sf-menu li li li a:focus, .sf-menu li li li a:hover, .sf-menu li li
li a:active
{
background: #9AAEDB;
outline: 0;
}
I think that will pretty well get you over the line.
If not, direct message me and I can work out the rest for you at a
fee.
Good luck.
On Dec 22, 12:53 pm, slflinders <slflind...@gmail.com> wrote:
> I'm still looking for help on this issue. Any other suggestions?
>
> On Dec 21, 6:56 am, slflinders <slflind...@gmail.com> wrote:
>
> > Yes, that's exactly what I want to accomplish. I tried your suggestion
> > below, but it doesn't work.
>
> > When I remove the background color definition from the '.sf-menu a'
> > item, all menu items have a transparent background. No matter what
> > colors I specify in the '.sf-menu li' items, they don't have any
> > effect--even changing the top-level 'li' item from transparent to
> > another color doesn't have any effect.
>
> > I'm trying to get the 404 error fixed, but it only affects the main
> > landing page. You can see the site by going to theratrike.com/
> > home.html instead.
>
> > Thanks for your help.
>
> > On Dec 20, 10:05 pm, Dasher <sea...@gocreate.com.au> wrote:
>
> > > Howdy,
>
> > > I think I know what you'e after.
>
> > > + Transparent background on top level links
> > > + Solid background on sub links
>
> > > The link you referred to returns a 404 page so I could not see it in
> > > action.
>
> > > I would do it by removing the background colour from the 'a' item and
> > > adding it to the 'li' item instead.
>
> > > Eg
>
> > > .sf-menu a {
> > > border-left: 1px solid #fff;
> > > border-top: 1px solid #fff;
> > > padding: .1em .1em;
> > > text-decoration:none;
>
> > > }
>
> > > .sf-menu li { background: transparent; } /*top level*/
> > > .sf-menu li li { background: #F0F; } /*second level*/
> > > .sf-menu li li li { background: #000; } /*third level*/
>
> > > And then just change the colours to suit.
>
> > > Hope that helps.
>
> > > Cheers.
>
> > > Nick
>
> > > On Dec 20, 3:39 am, slflinders <slflind...@gmail.com> wrote:
>
> > > > I'm using a Superfish menu for the top menu at the following site:
>
> > > >http://theratrike.com
>
> > > > The first-level menu has an image behind it and the default background
> > > > color for the list items was transparent, which made it look nice.
> > > > However, when you hovered over a first-level item to expose the sub-
> > > > menu, the background for the sub-menu items was also transparent.
> > > > Since the sub-menu drops down, the other elements of the page show
> > > > through the sub-menu items and make them hard to read.
>
> > > > So, I added a background color to the .sf-menu as follows:
>
> > > > .sf-menu a {
> > > > border-left: 1px solid #fff;
> > > > border-top: 1px solid #fff;
> > > > padding: .1em .1em;
> > > > background: #f5f5f5;
> > > > text-decoration:none;
>
> > > > }
>
> > > > That solves the problem for the sub-menu items, but now the background
> > > > color is also covering the image behind the first-level menu items. Is
> > > > it possible to have the first-level items with a transparent
> > > > background and the sub-menu items with a solid background? If so, how
> > > > do I accomplish that?
>
> > > > Thanks.
