下面是我自己所写的代码，只有“首页”这个菜单的子菜单设置了延时消失。
但是有bug啊啊啊啊啊。当鼠标移到第一个主菜单时，该菜单的子菜单出现了，然后再把鼠标移到第二个子菜单，然后该菜单的子菜单也出现了。
但是问题是第一个主菜单的子菜单设置了延迟消失，然后就出现问题了。 具体如何解决呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
ul{
list-style: none;//取消样式
margin: 0px;
padding: 0px;
}
li{
float: left;
}
a{
text-decoration: none;
}
#nav-div{
width: 500px;
height: 40px;
background: lavender;
margin: auto;
border-bottom: solid 3px paleturquoise;
}
#nav-div ul li{
margin-left: 2px;
width: 78px;
height: 40px;
}
#nav-div ul li a{
display: block;
width: 78px;
height: 40px;
line-height: 40px;
text-align: center;
}
#nav-div ul li ul{
border:1px solid #ccc;
position: absolute;
display: none;
}
#nav-div ul li ul li{
display: block;
float: left;
}
#nav-div ul li:hover ul{
display: block;
}
//出现底部的指示线
#nav-div ul li:hover{
border-bottom: solid 3px palevioletred;
}
</style>
<body>
<div id="nav-div">
<ul>
<li class="link1">
<a id="shouye" href="#">首页</a>
<ul id="shouye_sub">
<li><a href="#">最近更新</a></li>
<li><a href="#">活动</a></li>
<li><a href="#">最近更新</a></li>
<li><a href="#">学员反馈</a></li>
</ul>
</li>
<li>
<a href="#">关于我们</a>
<ul>
<li><a href="#">妙味讲师</a></li>
<li><a href="#">培训方式</a></li>
<li><a href="#">培训理念</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</li>
<li>
<a href="#">作品</a>
<ul>
<li><a href="#">般固</a></li>
<li><a href="#">MATRIK</a></li>
<li><a href="#">留学e网</a></li>
<li><a href="#">ECMall</a></li>
</ul>
</li>
<li>
<a href="#">博客</a>
<ul>
<li><a href="#">JS教程</a></li>
<li><a href="#">弹出效果</a></li>
<li><a href="#">标签云</a></li>
<li><a href="#">计算器</a></li>
</ul>
</li>
<li style="float: right;">
<a href="#"><<更多</a>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
var shouye = document.getElementById("shouye");
shouye.onmouseout = function(){
setTimeout(function(){
document.getElementById("shouye_sub").style.display = "none";
},1000);
}
shouye.onmouseover = function(){
document.getElementById("shouye_sub").style.display = "block";
}
</script>
</html>