Cada menu dropdown com uma cor diferente

[Andryon PHProgrammer]

Pessoal,

Gostaria de fazer um menu dropdown com cada item do menu seja de uma cor, abrindo os subniveis com esta mesma cor. Mas não estou conseguindo colocar um cor diferente para cada menu ao abrir o menu, sempre esta ficando a mesma cor para os subitens. Como que eu posso fazer isso? Já tentei colocar ids nas <li> mas como não muito conhecimento de css fica dificil

Segue meu código:

/* NavbarMenu
--------------------------- */
#NavbarMenu {

width: 100%;height: 35px;
}
#NavbarMenuleft {
width: 100%;float: left;margin: 0;padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;list-style: none;margin: 0;padding: 0;
}
#nav li {
list-style: none;margin: 0;padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
display: block;
margin: 0;padding: 0px 12px 5px;border-right: 1px solid #fff;
}
#nav li a:hover, #nav li a:active {
margin: 0;padding: 0px 12px 1px;text-decoration: none;
}

#nav li#vender li a, #nav li li a:link, #nav li li a:visited {
background: #FF9933;/*--cor de fundo--*/
width: 150px;
color: #FFF; /*--cor do link--*/
float: none;margin: 0;padding: 7px 10px;border-bottom: 1px solid #FFF;border-left: 1px solid #FFF;border-right: 1px solid #FFF;
}

#nav li li a:hover, #nav li li a:active {
background: #777;/*--cor de fundo hover--*/
color: #FFF; /*--cor do link--*/
padding: 7px 10px;
}
#nav li {float: left;padding: 0;
}
#nav li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 170px;margin: 0;padding: 0;
}
#nav li ul a {width: 40px;
}
#nav li ul ul {margin: -32px 0 0 171px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {left: auto;}
#nav li:hover, #nav li.sfhover {position: static;}

        <div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Inicio</a></li>
<li class="colorOrange">
<a href='SEU LINK AQUI'>Comprar</a>
<ul>
<li><a href='SEU LINK AQUI'>Iniciar Nova Cotacao </a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
</ul>
</li>
<li id="li2"><a href='SEU LINK AQUI' class="colorRed" id="vender">Vender</a>
<ul>
<li id="li21"><a href='SEU LINK AQUI'>Nome do Link </a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
</ul>
</li>
<li><a href='SEU LINK AQUI' class="colorGreen">Leiloes</a>
<ul>
<li><a href='SEU LINK AQUI'>Nome do Link </a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
</ul>
</li>
<li><a href='SEU LINK AQUI' class="colorBlue">Empresas</a>
<ul>
<li><a href='SEU LINK AQUI'>Nome do Link </a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
</ul>
</li>
<li><a href='SEU LINK AQUI' class="colorBlue">Planos de Fidelidade</a></li>
<li><a href='SEU LINK AQUI' class="colorBlue">Como Funciona</a></li>
</ul>
</div>
</div>

[atkins]

Ola amigo, eu vou lhe mandar uma resposta rapida que acho que vai lhe ajudar, caso não ajude, eu farei para você. Vou fazer isso pois assim você programa e aprende também.

1ª parte - você vai colocar uma class="" nas <ul> que são os submenus, ou seja:

<ul id="nav">

<li></li>

<li>

<ul class="aqui">

</ul>

</li>

Depois que você colocar uma class nos ul, é simples, voce vai na parte la de style onde esta declarado tudo, e vai declarar assim:

li ul.aqui {

background-color:seuinteresse;

}

você vai fazer assim para todos os submenus que voce quiser mudar...

2ª Parte - agora que voce tem os submenus cada um de uma cor, vem a hora de deixar os botoes do menu que levam a esse submenu com cor diferente tb... Caso você queira mudar para todos, sem exceção, eu aconselho por uma class="" para cada um dos <li> tb...

Para declarar essas li no style vai ser assim:

li.nomedaclass {

background-color:seuinteresse;

}

Espero ter ajudado, qualquer coisa deixa uma msg aki que voltarei para olhar suas respostas...

[Andryon PHProgrammer]

Olá atkins

Desenvolvi um código para mudar a cor dos menu utilizando style='.....' no menu. Mas ao expandir os menu estão todos aparecendo apenas com a cor laranja definida no primeiro menu. Não entendo muito de css se pudesse me ajudar agradeceria

[atkins]

Putz, cara vou ser sincero contigo, se teu site for ser grande vai ficar horrivel pra manipular.... se devia separar as css... mas mesmo assim, vamos la... se você já mudou a cor do menu, é simples mudar a do submenu, é só fazer aquela primeira parte que eu te passei...

aquele ul li.aqui vai dentro do head, dentro do <style type="text/css"></style>... é bem simples...

tipo assim:

teu codigo é assim:

<html>

<head>

<title></title>

<style type="text/css">

li ul.aqui {

background-color:seuinteresse;

}

</style>

</head>

<body>

<ul id="nav">

<li></li>

<li>

<ul class="aqui">

<li></li>

<li></li>

</ul>

</li>

</body>

</html>

Editado Dezembro 11, 2012 por atkins