menu with different items color

[alexflaco]

Hi,

I need to do a nav bar with different items color. for the moment all my buttons have the colour desired in a roll over state but the problem comes when the button has sub menus. I can not make it work and is driving me mad.

here is the link two show you what i mean.

http://www.sunnyspell.com/navbar/index.html

Thanks

[alexflaco]

Each button has a different colour when hovered as I show in the second picture. the initial state of the nav bar is with the background white and text in black.
If the button had sub buttons like in the About Us the effect will be like in the third picture.

I hope it is clear now, if you check the pictures you can see the different states of the buttons.

Thanks

[joshuanhibbert]

Please show us what you currently have. Ideally in a jsFiddle.

[alexflaco]

Guys, I am going to bed, I will catch up with you tomorrow with everything ready for action.

[timmey]

if i get it right:
how do you apply your stlyes to each button? if you have a class like

.about-us {background: ..}

, you could style the submenu with

.about-us li {background: ..}

[Rutger]

You could use

.about-us li:hover {background: ..}

[ylc66]

hi,

what about :

HTML :

Home


About Us



Productions


Gallery


Mission Statement


Artistic Policy


Staff


The Board






Participation & Training


News


Shop


Contact

CSS :

ul {list-style-type:none;}

ul li {float: left; position: relative}

ul li#blue ul { display:none; position:absolute; top:43px;left:0; width:150px;}

ul li#blue:hover ul { display:block;}

ul ul li {float:none; text-align:left;}

ul li a {text-decoration:none; font-weight:bold; display:block; line-height:2em;color:black; padding:5px 10px;background-color:#F6F6F6;

border-left:1px solid white;border-right:1px solid #999;border-bottom:1px solid #999;}

ul ul li a { font-weight:normal ;border-right: none;border-left: none;}

ul li a:hover {color:white;}



ul ul li a:hover {color:grey;background-color:#40C4D0;}



ul li#green a:hover {background-color:#C5D01C;}

ul li#blue a:hover {background-color:#40C4D0;}

ul li#orange a:hover {background-color:#FF6600;}

ul li#yellow a:hover {background-color:#FFC602;}

ul li#yellowgreen a:hover {background-color:#C5D01C;}

ul li#ligthblue a:hover {background-color:#40C4D0;}

see it in action on jsFiddle

then, you can make your buttons look better, for example using ultimate css gradient

hope it helps ….

youn.

[Author]

Posts