دوست عزیزازjquery میتونی کمک بگیری ازاین روش استفاده کن
<html>
<head>
<style>
* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; }
.menu {
text-align: center;
list-style: none;
margin: 200px auto;
padding: 0;
line-height: 28px;
height: 30px;
overflow: hidden;
font-size: 16px;
position: relative;
}
.menu li {
background: #bbb;
display: inline-block;
position: relative;
margin: 0 -5px;
padding: 0 20px;
border:1px solid #000;
}
.menu li:hover {
background: #999933;
}
.menu a {
color: #fff;
text-decoration: none;
}
.menu li.selected {
background: #999933;
color: #000;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function() {
$("li").click(function(e) {
e.preventDefault();
$("li").removeClass("selected");
$(this).addClass("selected");
});
});
</script>
</head>
<body>
<ul class="menu">
<li class="selected"><a href="#">Main</a></li>
<li><a href="#">Find A Car</a></li>
<li><a href="#">Sell Your Car</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Customers Say</a></li>
<li><a href="Default2.aspx">Contact Us</a></li>
</ul>
</body>
</html>