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>
Pergunta
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:
Link para o comentário
Compartilhar em outros sites
3 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.