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

Como deixar cada item do meu menu drop-down com cores diferentes ?


Paloma Cabral

Pergunta

Sou inciante em CSS, e criei um menu drop-down baseado em um tutorial  que assisti no youtube, obtive um resultado satisfatório. Mas eu gostaria que os items Categorias e Contato ficassem com cores diferentes do item Home

image.thumb.png.93be313fe9b85be22b78734a7d35091a.png

Segue meu código HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
<link rel="stylesheet" type="text/css" href="codecss7.css">
</head>
<body>
<p id="tit"> Mundo Quimica </p> 
<nav class="menu">
  <ul>
         <li> <a href="#"> Home </a> </li> 
         <li> <a href="#"> Categorias </a> 
           <ul>
               <li> <a href="#"> Quimica Geral </a> </li>
               <li> <a href="#"> Quimica Inorganica </a> </li>
               <li> <a href="#"> Quimica Organica </a> 
               </li> 
               <li> <a href="#"> Fisico Quimica </a> </li>
               <li> <a href="#"> Bioquimica </a> </li> 
           </ul>
         </li>
         <li> <a href="#"> Contato </a> 
              <ul>
                  <li> <a href="#"> Nos Siga </a> </li>
                  <li> <a href="#"> Telefones </a> </li>
                  <li> <a href="#"> Video Aulas </a> </li> 
              
              </ul>
         </li>
  </ul> 
    
</nav> 

</body>
</html>

Meu código CSS: 

*
{
    margin: 0;
    padding: 0; 
}

.menu
{
    width: 100%;
    height: 50px; 
    background-color: #FF4500;
    font-family: Impact;
    font-size: 20px;
    letter-spacing: 2px; 
    margin-top: 20px; 

.menu ul 
{
    position: relative;
    list-style: none; 

}

.menu ul li 
{
    width: 33.3%;
    float: left; 
    background-color: #B22222; 

.menu a 
{
    padding: 15px;
    display: block; 
    text-decoration: none;
    color: #FFFFFF; 
    background-color: #FF4500; 
    text-align: center; 
}

.menu ul ul
{
    width: 100%;
    height: 100px;
    position: absolute;
    display: none; 
    
}

.menu ul li:hover ul 
{
    display: block; 
    

.menu a:hover
{
    text-transform: uppercase;
    background-color: #000000; 
}

.menu ul ul li
{
    float: none;
    border-bottom: 2px solid #FFFF00; 
}

.menu ul ul li a
{
    background-color: #D2691E; 
}

#tit
{
   font-family: "MV Boli";
   font-weight: bold;
   color: #000000; 
   font-size: 40px;
   letter-spacing: 10px; 
   margin-left:500px; 


}

body
{
    background-image: url(bckg3.jpg);
    background-size: 100%; 

Desde já agradeço.  

image.png

Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

  • 0

Você pode adicionar uma classe nos elementos de cada um dos itens, exemplo:

<ul>
         <li> <a href="#"> Home </a> </li> 
         <li class="azul"> <a href="#"> Categorias </a> 
           <ul>
               <li> <a href="#"> Quimica Geral </a> </li>
               <li> <a href="#"> Quimica Inorganica </a> </li>
               <li> <a href="#"> Quimica Organica </a> 
               </li> 
               <li> <a href="#"> Fisico Quimica </a> </li>
               <li> <a href="#"> Bioquimica </a> </li> 
           </ul>
         </li>
         <li class="verde"> <a href="#"> Contato </a> 
              <ul>
                  <li> <a href="#"> Nos Siga </a> </li>
                  <li> <a href="#"> Telefones </a> </li>
                  <li> <a href="#"> Video Aulas </a> </li> 
              
              </ul>
         </li>
  </ul>

E no CSS você determina uma cor para essas classes:

.azul { color: blue }

.verde { color: green }

 

Editado por navegantenarede
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
      152k
    • Posts
      651,8k
×
×
  • Criar Novo...