Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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;
}float: left;list-style: none;margin: 0;padding: 0;
}list-style: none;margin: 0;padding: 0;
}display: block;
margin: 0;padding: 0px 12px 5px;border-right: 1px solid #fff;
}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;
} <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>Carregando comentários...