简单的基于JS和CSS的菜单

<style type="text/css">
#menu{
width:780px;
height:34px;
background-image:url(images/news_line.jpg);
background-repeat: repeat-x;
}
#menu ul{
margin:0 0 0 5px;
padding:0;
list-style-type:none;
}
#menu ul li{
padding-top:2px;
list-style-type:none;
margin:0;
float:left;
color:white;
font-size:13px;
line-height:34px;
}

#menu ul li a{
padding-left:10px;
padding-right:10px;
line-height:30px;
font-size:13px;
text-decoration:none;
display:block;
color:white;
}

#menu ul li a:hover{
color:red;
background-image: url(images/a_line.jpg);
background-repeat: repeat-x;
}

#menu ul li a#.select {
color:red;
background-image: url(images/a_line.jpg);
background-repeat: repeat-x;

}
</style>
<script language="javascript">
function setcurrent(n){
var current=document.getElementById("menu").getElementsByTagName("a");
for(i=0;i<current.length;i++)
current[i].className=i==(n-1)?"select":"";
}

</script>
<div id="menu">
<ul>
<li ><a class="select" href="#" onclick="setcurrent(1)">研究生教育新闻</a></li><li>|</li>
<li><a href="#" onclick="setcurrent(2)">思政工作</a></li><li>|</li>
<li><a href="#" onclick="setcurrent(3)">招生信息</a></li><li>|</li>
<li><a href="#" onclick="setcurrent(4)">培养信息</a></li><li>|</li>
<li><a href="#" onclick="setcurrent(5)">学位工作</a></li><li>|</li>
<li><a href="#" onclick="setcurrent(6)">学籍管理</a></li><li>|</li>
<li><a href="#" onclick="setcurrent(7)">公派留学</a></li><li>|</li>
<li><a href="#" onclick="setcurrent(8)">工程硕士</a></li><li>|</li>
<li><a href="#" onclick="setcurrent(9)">其他信息</a></li>
</ul>
</div>