用一个简单的js就可以
js里：
function xk(n){
for(var i=1i<=6i++){
var curB=document.getElementById("nav"+i)
if(n==i){
curB.className="active"
}else{
curB.className="none"
}
}
}
css里：加一个选中后的样式
.active{} /*he js里的curB.className="active"名称对应*/
菜单：
<ul>
<li onclick="return xk(1)" id="nav1" class="none"><a href="/">11111</a></li>
<li onclick="return xk(2)" id="nav2" class="none"><a href="/">22222</a></li>
<li onclick="return xk(3)" id="nav3" class="none"><a href="/">33333</a></li>
<li onclick="return xk(4)" id="nav4" class="none"><a href="/">44444</a></li>
<li onclick="return xk(5)" id="nav5" class="none"><a href="/">55555</a></li>
<li onclick="return xk(6)" id="nav6" class="none"><a href="/">66666</a></li>
</ul>
虽然代码可能有点麻烦 但是可以实现
这是我写的一个导航，你自己看吧。li并列应该定义其float属性为left。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>menu </TITLE>
</HEAD>
<style>
body{
padding-top:200px
text-align:center
font-size:13px
}
#content{
margin:0 auto
text-align:left
width:720px
background:orange
background-color:black
}
ul{
margin-top:1px
list-style:none
}
#father li{
float:left
position:relative
margin-right:10px
width:120px
text-align:center
border:1px solid black
border-bottom:none
}
#father li a:link,#father li a:visited{
line-height:30px
color:darkred
font-weight:bold
}
#father li ul *{
float:none
margin-right:0px
padding:0
color:none
width:90px
background-color:orange
border:none
}
.child{
position:absolute
top:29px
right:0px
display:none
}
#father li ul li a:link,#father li ul li a:visited{
margin:1px
color:blue
text-decoration:none
font-weight:normal
line-height:20px
}
#father li ul li a:hover{
background-color:white
}
</style>
<script>
function showMenu(emt,id1,id2){
document.getElementById(id1).style.textDecoration = "none"
document.getElementById(id1).style.color = "white"
document.getElementById(id2).style.display = "block"
emt.style.backgroundColor = "orange"
emt.style.borderColor = "white"
}
function hiddenMenu(emt,id1,id2){
document.getElementById(id1).style.textDecoration = "underline"
document.getElementById(id1).style.color = "darkred"
document.getElementById(id2).style.display = "none"
emt.style.backgroundColor = "black"
emt.style.borderColor = "black"
}
</script>
<BODY>
</table>
<div id="content">
<ul id="father">
<li onmouseover="showMenu(this,'a1','ul1')" onmouseout="hiddenMenu(this,'a1','ul1')">
<a id="a1" href="#">主页</a>
<ul id="ul1" class="child">
<li><a href="#">文字测试</a></li>
<li><a href="#">使用中文字符</a></li>
<li><a href="#">你看可以吗</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
</ul>
</li>
<li onmouseover="showMenu(this,'a2','ul2')" onmouseout="hiddenMenu(this,'a2','ul2')">
<a id="a2" href="#">程序设计</a>
<ul id="ul2" class="child">
<li><a href="#">JAVA</a></li>
<li><a href="#">C/C++</a></li>
<li><a href="#">C#.NET</a></li>
<li><a href="#">游戏开发</a></li>
<li><a href="#">汇编</a></li>
</ul>
</li>
<li onmouseover="showMenu(this,'a3','ul3')" onmouseout="hiddenMenu(this,'a3','ul3')">
<a id="a3" href="#">网页技术</a>
<ul id="ul3" class="child">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">XML</a></li>
<li><a href="#">ASP</a></li>
<li><a href="#">JSP</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Perl</a></li>
</ul>
</li>
<li onmouseover="showMenu(this,'a4','ul4')" onmouseout="hiddenMenu(this,'a4','ul4')">
<a id="a4" href="#">动态网页</a>
<ul id="ul4" class="child">
<li><a href="#">ASP</a></li>
<li><a href="#">JSP</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Perl</a></li>
</ul>
</li>
<li onmouseover="showMenu(this,'a5','ul5')" onmouseout="hiddenMenu(this,'a5','ul5')">
<a id="a5" href="#">关于我</a>
<ul id="ul5" class="child">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</li>
</ul>
<div>
</BODY>
</HTML>
