<div id="wrapper">
<ul>
<li><a href="#"><i class="icon-list-alt"></i>
<div>
Home
</div>
</a></li>
<li class="current"><a href="#"><i class="icon-calendar"></i>
<div>
Features
</div>
</a></li>
<li><a href="#"><i class="icon-cloud-download"></i>
<div>
Screenshots
</div>
</a></li>
<li><a href="#"><i class="icon-tags"></i>
<div>
Request Online Demo
</div>
</a></li>
<li><a href="#"><i class="icon-bar-chart"></i>
<div>
View it in Action
</div>
</a></li>
<li><a href="#"><i class="icon-bell-alt"></i>
<div>
Events
</div>
</a></li>
</ul>
</div>
/*
* Developed by Alireza Eskandarpour Shoferi (@cyletech)
* Designed by Mike (http://dribbble.com/creativemints)
* http://about.me/cyletech
*
* (c) 2013 Alireza Eskandarpour Shoferi
* Released under the MIT license
* https://opensource.org/licenses/MIT
*/
@redDefultColor: red;
body {
background-color: #1f0630;
font-family: 'Open Sans', sans-serif;
}
ul {
box-sizing: border-box;
margin: 0;
padding: 0;
height: 118px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #4C4C4C;
box-shadow: 0 0 10px #000000 inset;
}
#wrapper {
position: absolute;
left: 50%;
margin-top: 97px;
margin-left: -449.5px;
width: 900px;
}
li {
display: inline-block;
float: left;
width: 150px;
text-align: center;
}
li:hover > a,
li.current > a {
color: #197DE1;
}
.current {
margin-top: -6px;
border-top: 6px solid #197DE1;
border-bottom: 6px solid #197DE1;
}
.current::before {
position: absolute;
display: block;
margin-left: 67px;
width: 0;
height: 0;
border-top: 6px solid #197DE1;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
content: "";
}
a {
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: padding-box;
box-sizing: border-box;
padding-top: 19px;
height: 118px;
border-right: thin solid #e0e1db;
text-decoration: none;
font-size: 2.375em;
}
a,
a:visited {
color: #FFF;
}
li:last-of-type > a {
border-right-style: none;
}
li div {
margin-top: 5px;
font-weight: 600;
font-size: 0.813rem;
}
View Compiled
This Pen doesn't use any external JavaScript resources.