怎么把光标离开下拉菜单时,把下拉菜单隐藏?
<html><head>
<style>
*{margin:0;padding:0;}
ul{
list-style:none;
}
#menu{
width:860px;
margin:55px auto;
font-size:13px;
border:1px solid orange;
overflow:hidden;
}
#tabMenu{
background:orange;
height:30px;
width:870px;
}
#tabMenu li{
float:left;
line-height:30px;
width:143px;
background:#fdceff;
margin-right:1px;
text-align:center;
}
#tabMenu .bgcaption{
background:#fbb7fd;
color:#fff;
font-weight:bold;
}
#tabContent{
width:860px;
position:relative;
height:100px;
}
#tabContent ul{
background:#fbb7fd;
width:144px;
position:absolute;
top:0;
left:0;
}
#tabContent .current{
display:block;
}
#tabContent .normal{
display:none;
}
</style>
<script type="text/javascript">
function tabChange(num){
var tabMenu = document.getElementById("tabMenu");
var tablist = tabMenu.getElementsByTagName("li");
for(var i=0; i<tablist.length; i++){
var m = i+1;
if(i == num){
document.getElementById("list_"+m).className ="current";
tablist[i].className = "bgcaption";
document.getElementById("list_"+m).style.left = num*144+"px";
}
else{
document.getElementById("list_"+m).className ="normal";
tablist[i].className = ""
}
var content = document.getElementById("tabContent")
var list = content.getElementsByTagName("ul")
list[i].oumouseout = function(){
this.className ="normal";
}
}
}
</script>
</head>
<body>
<div id="menu">
<div id="tabMenu">
<ul>
<li onmouseover="tabChange(0)">新闻</li>
<li onmouseover="tabChange(1)">游戏</li>
<li onmouseover="tabChange(2)">聊天</li>
<li onmouseover="tabChange(3)">产品</li>
<li onmouseover="tabChange(4)">音乐</li>
<li onmouseover="tabChange(5)">论坛</li>
</ul>
</div>
<div id="tabContent">
<ul id="list_1">
<li><a href="">网易新闻</a></li>
<li><a href="">新浪新闻</a></li>
<li><a href="">腾讯新闻</a></li>
<li><a href="">搜狐新闻</a></li>
</ul>
<ul id="list_2" class="normal">
<li><a href="">网络游戏</a></li>
<li><a href="">单机游戏</a></li>
<li><a href="">小游戏</a></li>
</ul>
<ul id="list_3" class="normal">
<li><a href="">QQ即时通</a></li>
<li><a href="">msn即时通</a></li>
</ul>
<ul id="list_4" class="normal">
<li><a href="">暂无!</a></li>
<li><a href="">暂无!</a></li>
<li><a href="">暂无!</a></li>
<li><a href="">暂无!</a></li>
</ul>
<ul id="list_5" class="normal">
<li><a href="">在线试听</a></li>
<li><a href="">下载歌词</a></li>
</ul>
<ul id="list_6" class="normal">
<li><a href="">天涯社区</a></li>
<li><a href="">猫扑论坛</a></li>
</ul>
</div>
</div>
</body>
</html>
[ 本帖最后由 rao3324180 于 2010-8-8 16:37 编辑 ]
