<h1>Pure CSS Dropdown Menu</h1>

<div class="container">
  
<nav>
  <ul class="menu">
		<li><a href="#">Home</a></li>
		<li><a href="#">Sobre</a></li>
	  		<li><a href="#">O que fazemos?</a>
	         	<ul>
	                  <li><a href="#">Web Design</a></li>
	                  <li><a href="#">SEO</a></li>
	                  <li><a href="#">Design</a></li>                    
	       		</ul>
			</li>
		<li><a href="#">Links</a></li>
		<li><a href="#">Contato</a></li>                
</ul>
</nav>
  
  
</div>
/* ============================================================================================== 
Renata G Martins
http://www.renatagmartins.com.br
================================================================================================= */

h1{
  font-family: Vernada;
  font-size:36px;
  margin-bottom:30px;
  color:#000;
}
.container{
  width:100%;
  text-align:center;
}

.menu li{
position:relative; 
display:inline-block;
border-right:1px solid #c0c0c0; 
}

.menu li a{color:#333; text-decoration:none; padding:5px 10px; display:block;}

.menu li a:hover{
  background:#999; 
  color:#fff; 
}

.menu li  ul{
  position:absolute; 
  top:28px; 
  left:-50px;
  background-color:#fff; 
  display:none;
}	
.menu li:hover ul, .menu li.over ul{display:block;}

.menu li ul li{
  border:1px solid #c0c0c0; 
  display:block; 
  width:150px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.