<nav id="mainNav">
  <ul>
    <li><a href="#"><i class="icon-home"></i><br />Home</a></li>
    <li><a href="#"><i class="icon-cog"></i><br />Services</a></li>
    <li><a href="#"><i class="icon-desktop"></i><br />Portfolio</a>
      <ul class="sub-menu">
        <li><a href="#"><i class="icon-plane"></i> Web</a></li>
        <li><a href="#"><i class="icon-book"></i> Print</a></li>
        <li><a href="#"><i class="icon-facetime-video"></i> Video</a></li>
      </ul>
    </li>
    <li><a href="#"><i class="icon-user"></i><br />About</a></li>
    <li><a href="#"><i class="icon-twitter"></i><br />Contact</a></li>
  </ul><div class="clr"></div>
</nav> 
@import "compass/css3";

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.clr{clear:both;}
body {background-color:#ddd;}

#mainNav {
  background-color:#f60;
  font-size:0;
  text-align:center;
  width:100%;
}

#mainNav ul {font-size:12px; }
#mainNav i {font-size:3em;}
#mainNav li {display:inline-block; height:inherit;}

#mainNav a {
  color:#fff;
  font-family: Century Gothic;
  font-size: 1.5em;
  display:block;
  height:inherit;
  margin:0;
  padding:1.75em 1em;
  text-decoration:none;
}

#mainNav a:hover {
  background-color:#900; transition: background .25s ease;
 
}

#mainNav li .sub-menu {
  background-color:#900;
  position:absolute;
  left:-9999px;
  opacity:0;
  transition: opacity .75s;
  width:100%;
  z-index:10;
}

#mainNav li:hover .sub-menu {
  left:0px;
  opacity:1;
}

#mainNav .sub-menu i {font-size:1em;}

#mainNav .sub-menu a {
  height:3em; line-height:3em;
  padding:0 2em;
  height:inherit;
  width:100%;
}

#mainNav .sub-menu a:hover {background-color:#f60;}
View Compiled

External CSS

  1. https://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css

External JavaScript

This Pen doesn't use any external JavaScript resources.