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.