直接上代码吧!!!
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 实现这样的效果主要是要定位 向右侧偏移一下就可以了 */
.sidebar { position: relative; width: 200px; height: <a href="https://www.baidu.com/s?wd=500px&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y3mWbknWRsuj6knjRYmWN-0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHTvPWD3PWfYnjf1P1mvrjD3n0" target="_blank" class="baidu-highlight">500px</a>; background: #DDD; border: 1px solid #F00; }
.sidebar > ul { position: relative; padding: 0; margin: 0; width: 160px; margin-top: 30px; float: right; right: -1px; }
.sidebar li { <a href="https://www.baidu.com/s?wd=text-align&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y3mWbknWRsuj6knjRYmWN-0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHTvPWD3PWfYnjf1P1mvrjD3n0" target="_blank" class="baidu-highlight">text-align</a>: center; <a href="https://www.baidu.com/s?wd=list-style&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y3mWbknWRsuj6knjRYmWN-0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHTvPWD3PWfYnjf1P1mvrjD3n0" target="_blank" class="baidu-highlight">list-style</a>: none; padding: 0; margin: 0; font: 12px/3 "Microsoft YaHei",SimHei; }
.sidebar li>a { <a href="https://www.baidu.com/s?wd=text-decoration&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y3mWbknWRsuj6knjRYmWN-0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHTvPWD3PWfYnjf1P1mvrjD3n0" target="_blank" class="baidu-highlight">text-decoration</a>: none; color: #333; }
.sidebar .hover { border: 1px solid #B4B4B4; border-right: none; background: #EEE; }
</style>
<!-- 引入jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
/*
// jQuery方式开始
$(function(){
$('div.sidebar li').click(function(){
$(this).addClass('hover').siblings('li').removeClass('hover');
})
})
// jQuery方式结束
*/
// 原生Javascript
window.οnlοad=function(){
var obj=document.getElementById('nav');
var lis=obj.getElementsByTagName('li');
obj.οnclick=function(event){
var e=event||window.event;
var obj=e.srcElement?e.srcElement:e.target;
// 去掉其他LI的hover样式
for(var i=0, l=lis.length; i < l; i++){
lis[i].className="";
}
switch(obj.tagName){
case 'LI':
obj.className="hover";
break;
case 'A':
obj.parentNode.className="hover";
break;
}
}
}
</script>
</head>
<body>
<div class="sidebar">
<ul id="nav">
<li class="hover" ><a href="#">caidan</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#">菜单三</a></li>
<li><a href="#">菜单四</a></li>
<li><a href="#">菜单五</a></li>
</ul>
</div>
</body>
</html>