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.
