<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.