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.

Entrar

Paloma Cabral

Total de itens

Registro em

Última visita

Tipo de Conteúdo

Perfis

Fóruns

Posts postados por Paloma Cabral

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

Navegação

Atividades