Ir para conteúdo
Fórum Script Brasil
  • 0

Cada menu dropdown com uma cor diferente


Andryon PHProgrammer

Pergunta

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>

Link para o comentário
Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

  • 0

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...

Link para o comentário
Compartilhar em outros sites

  • 0

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 por atkins
Link para o comentário
Compartilhar em outros sites

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.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...