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 <[email protected]> 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.
