HTML
<nav id="nav" class="navigation">
<ul>
<li class="active-item"><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Page #1</a></li>
<li><a href="#">Page #2</a></li>
<li><a href="#">Page #3</a></li>
</ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">Page #1</a></li>
<li><a href="#">Page #2</a></li>
<li><a href="#">Page #3</a></li>
</ul>
</li>
</ul>
</nav>
CSS
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
body {
background: #16a085;
}
#nav {
margin-top: 2.5em;
text-align: center;
}
#nav ul li {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
display: inline-block;
padding: 1em;
font-size: 1.15em;
}
#nav ul li.active-item a {
border-top: 0.35em solid #ecf0f1;
}
#nav ul li:last-child {
padding-right: 0;
}
#nav ul li ul {
display: none;
margin: 0;
padding: 0;
position: absolute;
background: #fff;
padding: .5em;
margin-top: .75em;
margin-left: 0em;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.35);
border-radius: .25em;
}
#nav ul li ul:before {
content: "";
position: absolute;
top: -8px;
left: 5%;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 10px 8px 10px;
border-color: transparent transparent #ffffff transparent;
}
#nav ul li ul li {
display: block;
margin: 0;
padding: 0;
}
#nav ul li ul li a {
font-weight: normal;
font-size: .65em;
color: #5f7385;
padding: .5em;
display: block;
border-radius: .25em;
}
#nav ul li ul li a:hover {
border-top: none;
color: #2a333b;
background: #eaeaea;
}
#nav ul li ul li a:active {
position: relative;
top: 1px;
}
#nav ul li a {
color: #fff;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
padding-top: 1em;
letter-spacing: 0.2em;
}
#nav ul li a:hover {
border-top: 0.35em solid #34495e;
color: #d9d9d9;
}
