<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

External CSS

  1. https://fonts.googleapis.com/css?family=Open+Sans:600

External JavaScript

This Pen doesn't use any external JavaScript resources.