A CodePen by Sara Soueidan. CSS3 Black Navigation Menu - Inspired by Dribbblr Asif Aleem's work: http://dribbble.com/shots/757351-Navigation-Menus-PSD?list=46244-Freebies
*{
border:0;
margin:0 ;
padding:0;
list-style-type:none;
outline:none;
}
ul{
margin:0 !important;
}
html,body{
height:100%;
}
body{
background-color:rgb(74, 74, 74);
background: url("http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/noisy_net.png") repeat scroll center center rgb(74, 74, 74);
}
.wrapper-1, .wrapper-2{
margin:30px auto;
width:412px;
background:linear-gradient(#3D4246,#24282B);
height:60px;
border-radius:4px;
border-top:1px solid #53575C;
border-left:1px solid #53575C;
box-shadow:
1px 1px #17191C,
0 0 10px #323338;
padding:8px;
padding-bottom:12px;
}
ul{
width:410px;
height:100%;
border:1px solid #0F1014;
border-radius:3px;
background:#0F1014;
}
ul li {
float:left;
width:80px;
height:100%;
color:#D9D9D9;
text-align:center;
text-shadow:0 1px #0F1014;
display:table;
background: linear-gradient(#44494F,#2F3237);
border-radius:3px;
border-right:1px solid #0F1014;
border-bottom:1px solid #0F1014;
border-top:1px solid #53575C;
border-left:1px solid #53575C;
box-shadow:1px 1px #17191C;
cursor:pointer;
}
ul li b{
margin-top:20px;
font-size:24px;
}
ul li:active, ul li.active{
color:#171820;
background:#2A2D31;
box-shadow:
inset 0 0 5px 2px rgba(15, 16, 20, 0.5);
border:1px solid #0F1014;
}
ul li:not(.active):hover{
text-shadow:1px 1px 10px Yellow;
}
.wrapper-2 ul li:not(.active):hover{
text-shadow:1px 1px 10px HotPink;
}
ul li:active{
text-shadow:none !important;
}
.wrapper-2 ul li {
color:#0F1014;
text-shadow:0 1px #666;
}
.wrapper-2 ul li:active,
.wrapper-2 ul li.active {
color:grey;
}
/*Too bad Firefox doesn't allow cross-domain fonts*/
<div class="wrapper-1">
<ul id="nav">
<li><b class="icon-home"></b></li>
<li><b class="icon-picture"></b></li>
<li class="active"><b class="icon-facetime-video"></b></li>
<li><b class="icon-headphones"></b></li>
<li><b class="icon-user"></b></li>
</ul>
</div>
<div class="wrapper-2">
<ul id="nav">
<li class="active"><b class="icon-home"></b></li>
<li><b class="icon-picture"></b></li>
<li><b class="icon-facetime-video"></b></li>
<li><b class="icon-headphones"></b></li>
<li><b class="icon-user"></b></li>
</ul>
</div>