SOURCE

$(function(){

	$('nav menu li a').click(function(){
		var $this=$(this);	$this.parent().parent().parent().find("a").removeClass("selected");
		$this.toggleClass('selected');
		
	});

});

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js">
			</script>
  
  <nav>
				<menu>
					<li>
						<a href="#">
							☀
						</a>
					</li>
					<li>
						<a href="#">
							✈
						</a>
					</li>
					<li>
						<a href="#">
							❄
						</a>
					</li>
					<li>
						<a href="#">
							☎
						</a>
					</li>
				</menu>
			</nav>
			<nav class="menu2">
				<menu>
					<li>
						<a href="#">
							home
						</a>
					</li>
					<li >
						<a href="#" >
							blog
						</a>
				</li>
				<li>
					<a href="#">
						about
					</a>
				</li>
				<li>
					<a href="#">
						contact
					</a>
				</li>
				
			</menu>
		</nav>

body {
  background-color: #0a68bb;
  background-size : cover;
}

nav {
  margin : 0 auto;
  width  : 400px;
	margin-top:50px;
}

menu {
  border-radius : 3px;
}

menu:after , menu:before {
  display : block;
  content : ' ';
}

menu:after {
  clear : both;
}

li {
  list-style-type : none;
  background      : linear-gradient(rgba(220,220,255,0.4) 85%, rgba(255,255,255,0.5) 100%);
	
  float   : left;
  cursor  : pointer;
  padding : 3px 10px;
  border-top    : 2px solid rgba(200,200,255,0.5);
  border-bottom : 2px solid rgba(50,50,50,0.4);
}

li:first-child {
  border-radius : 5px 0 0 5px;
}

li:last-child {
  border-radius : 0 5px 5px 0;
}

a {
  display : block;
  padding : 10px 13px;
  font-size : 26px;
  text-decoration : none;
  border-radius   : 5px;
  position        : relative;
  top   : 0;
  color : #FFF;
	
  transition : all .4s;
}

li:hover a {
  top   : -20px;
  color : #4eacff;
  background-color: #fff;
  box-shadow : 0 0 5px 0 rgba(255, 255, 255, 0.7);
  transition : all .4s;
}

li a:after {
  display  : block;
  content  : '';
  position : absolute;
  top  : 100%;
  left : 42%;
  border-style : solid;
  border-color : transparent;
  border-width : 5px 5px 0 5px;
  transition   : all .4s;
}

li:hover a:after {
  border-color : white transparent transparent transparent;
  transition   : all .4s;
}

/*************************************/

.menu2 {
  width : 500px;
	margin:0 auto;
}

.menu2 a {
  font-family : georgia;
  font-size   : 14px;
  font-style  : italic;
  text-transform : capitalize;
}

.menu2 li {
  border-right  : 1px solid rgba(200,200,255,0.5);
  border-left   : 1px solid rgba(40,40,40,0.2);
	
}

.selected {
  top   : -20px;
  color : #4eacff;
  background-color: #fff;
  box-shadow : 0 0 5px 0 rgba(255, 255, 255, 0.7);
  transition : all .4s;
}

.selected:after {
  border-color : white transparent transparent transparent;
  transition   : all .4s;
}

a.fun {
  display : none;
}