<!-- 
Original pen taken from https://codepen.io/goiblas/pen/Dlxtf

Thanks to Goiblas - https://codepen.io/goiblas
-->
<div id="global">
<ul>
  <li>Maintain Keywords</li>
  <li>Archive</li>  
  <li>Share</li>
  <li>Find</li>
  <li>Store</li>
  <li>Create</li>
  <li class="active">Welcome</li>
</ul>
</div>

body{background-color:#111;}
* {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
ul { overflow:visible; float:left; padding-left:100px;position:absolute;bottom:0;}
#global {position:relative;
	width:100%;
	min-width:400px;
  height:100px;
	margin:0 auto;
	padding-top:12px;
	border-bottom:4px solid #8fa11d;
	overflow:hidden;
}

li {
	display: block;
	float: right;
	padding: 10px 14px 8px;
	background-color: #6a7a0f;
	border-radius:8px 8px 0 0;
	margin-right:10px;
	z-index:2;
	position:relative;
	cursor:pointer;
	color:#cfd08b;
	
	font:bold 12px/20px Arial, Helvetica, sans-serif;
	
	text-shadow:rgba(0,0,0,.16) -1px -1px;
}
li:before, li:after {
	display:block; content:" "; position:absolute;  top:0; height:100%; width:18px; 	
	background-color: #6a7a0f;
}
li:before {
	right:-8px;
	transform: skew(30deg, 0deg) ;
	-webkit-transform: skew(30deg, 0deg) ;
	-moz-transform: skew(30deg, 0deg) ;
	-o-transform: skew(30deg, 0deg) ;
	-ms-transform: skew(30deg, 0deg) ;
	border-radius:0 8px 0 0;
	box-shadow:rgba(0,0,0,.1)3px 2px 5px, inset rgba(255,255,255,.09)-1px 0;
}
li:after {
	left:-8px;
	transform: skew(-30deg, 0deg) ;
	-webkit-transform: skew(-30deg, 0deg) ;
	-moz-transform: skew(-30deg, 0deg) ;
	-o-transform: skew(-30deg, 0deg) ;
	-ms-transform: skew(-30deg, 0deg) ;
	border-radius:8px 0 0 0;
	box-shadow:rgba(0,0,0,.1)-3px 2px 5px, inset rgba(255,255,255,.09)1px 0;
}
li:hover, li:hover:before, li:hover:after {
	background-color:#5C6A0D;
}
.active, .active:before, .active:after, .active:hover, .active:hover:before, .active:hover:after { background-color:#8fa11d; color:#fff;}
.active {z-index:3;}

#global{background-color:#333;}

$(document).ready(function(){
  $('li').click(function(){
  $('.active').removeClass('active');
    $(this).addClass('active');
  });
  
});