How to make a Submenu item background color different to ma

General discussions about WebYep
Post Reply
martinjbull
Rank 1
Rank 1
Posts: 27
Joined: Mon Dec 13, 2010 9:01 pm

How to make a Submenu item background color different to ma

Post by martinjbull » Thu Feb 17, 2011 5:49 pm

Hi
Although it is said that webYep menus are not intended as main navigation menus I have much success using it as such. However I can not work out one matter (which is probably part of the fact that I am still learning css menu list styles.
What I want is the have a vertical menu with some items holding submenus. When the submenus appear I want the background colour (or image) to be different to the main items background image or color.
Here is the css for my menu:

Code: Select all

#MyMenu { font-family:Verdana, sans-serif; font-size:14px; line-height:100%; }
#MyMenu a { display: block; font-weight:normal; padding:8px 45px 8px 30px; border-color:#FFFFFF; border-width:1px; border-style:solid; }
#MyMenu a.WebYepMenuFirstItem { border-top:#603813 1px solid; }
#MyMenu li li a.WebYepMenuFirstItem { border-top:#603813 1px solid; }
#MyMenu li li a { padding:3px 30px 3px 55px; font-size:0.8em; }
#MyMenu a.WebYepMenuTitle { padding:5px 10px 5px 25px; background-image: url(Resources/submenuarrow.gif); background-repeat:no-repeat; background-position:right 100%; list-style-image: none; }
#MyMenu a.WebYepMenuTitleExpanded { background-image:none; list-style-image:none; }
#MyMenu a:link, #MyMenu a:visited, #MyMenu a:active { color:#FFFFFF; background-color:#C69C6D; text-decoration:none; }
#MyMenu a.WebYepMenuCurrentItem { color:#FFFFFF; background-color:#330000; text-decoration:none; }
#MyMenu a:hover.WebYepMenuCurrentItem { color:#FFFFFF; background-color:#C69C6D; text-decoration:none; }
#MyMenu a:hover { color:#EDEDE1; background-color:#996633; text-decoration:none; }
#MyMenu ul { margin:0px; padding:0px; list-style-type:none ; }
#MyMenu li { margin:0px; padding:0px; display:inline ; }

I have tried everything I can think of. What seems to happen is that if I add a style to the line which I think (?) styles the submenu item, I change this:

Code: Select all

#MyMenu li li a { padding:3px 30px 3px 55px; font-size:0.8em; }
to this:

Code: Select all

#MyMenu li li a { padding:3px 30px 3px 55px; font-size:0.8em; background-color: #C0C0C0; }


However all that happens is that the colour of all the item backgrounds changes.

Can anyone advise me?

Post Reply