Snippet:HeaderMenu

HeaderMenu

/*************************************************
		Header Menu jQuerey-Active/Hover
*************************************************/
<div class="header-l-menu">
	    <ul class="menu-list">
	        <li><a href="#" class="radius">Overview</a></li>
	        <li><a href="#" class="radius">Projects</a></li>
	        <li><a href="#" class="radius">People</a></li>
	        <li><a href="#" class="radius">Process</a></li>
	    </ul>
</div><!-- header-l-menu Ends-->
/************************************************
						css
************************************************/
#menu .header-l-menu ul.menu-list li{
	float:left;
	margin-right:10px;
}
#menu .header-l-menu ul.menu-list li a{
	font-family:droidsansbold;
	font-size:14px;
	padding:5px 10px;
	color:#777777;
    border-radius:8px;
	behavior: url(PIE.htc);
}
#menu .header-l-menu a.radius:hover{
	background-color:#036564;
	color: #ffffff;
}
.headerMenubg{
	background-color:#036564;
}
#menu .header-R-menu{
	width:263px;
	height:38px;
	float:right;
}


/************************
		Header Menu jQ
**************************/
$('.radius').on('click',function(){
    var $this=$(this);
        $this.addClass('headerMenubg').css('color','#ffffff')
            .parents('li').siblings('li')
            .find('a.radius').removeClass('headerMenubg').css('color','#777777');
});
/**********************Header Menu  Ends***********************/