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.