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

Paloma Cabral · Janeiro 12, 2018

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.

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.

navegantenarede · Janeiro 12, 2018

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 Janeiro 12, 2018 por navegantenarede

Entrar

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

Pergunta

Paloma Cabral

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

navegantenarede

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades