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.
