Forums

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

elneco

i dont get it. please elaborate. What are the submenus supposed to do when hovered? or supposed to look like initially?

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 :



<ul>
    <li id="green"><a href="#">Home</a></li>
    <li id="blue"><a href="#">About Us</a>
        <ul>
            <li><a href="#">Productions</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Mission Statement</a></li>
            <li><a href="#">Artistic Policy</a></li>
            <li><a href="#">Staff</a></li>
            <li><a href="#">The Board</a></li>
        </ul>
    </li>
    <li id="orange"><a href="#">Participation & Training</a></li>
    <li id="yellow"><a href="#">News</a></li>
    <li id="yellowgreen"><a href="#">Shop</a></li>
    <li id="ligthblue"><a href="#">Contact</a></li>
</ul>

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.

treehouse : what would you like to learn today?

Forums

menu with different items color