Saturday, December 19, 2009

[jQuery] Superfish - Background Color on Sub-Menus

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.

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home


Real Estate