javascript怎么让这个菜单栏鼠标移入时子菜单延时500毫秒显示？？代码怎么写呢？
鼠标移入时子菜单延时500毫秒显示鼠标离开时不延时马上消失谢谢了。<html><head><styletype="text/css">*{margin:0;padding...
鼠标移入时子菜单延时500毫秒显示 鼠标离开时不延时 马上消失 谢谢了。
<html>
<head>
<style type="text/css">
*{margin:0;padding:0;}
#div1{position:absolute;}
li{list-style-type:none;text-align:center;width:70px;height:30px;line-height:30px;}
#zg li{background:blue;float:left;}
#zg li #bj li{background:green;}
#zg li #bj li #xc li{background:red;}
#xc,#sjz{position:relative;left:70px;top:-30px;}
#dc{position:relative;left:70px;top:-60px;}
#bj{display:none;}
#hb{display:none}
#xc{display:none;}
#dc{display:none;}
</style>
<script type="text/javascript">
onload = function ()
{
var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++)
{
lis[i].onmouseover = function ()
{
this.children[0] ? this.children[0].style.display = "block" : 0;
}
lis[i].onmouseout = function ()
{
this.children[0] ? this.children[0].style.display = "none" : 0;
}
}
}
</script>
</head>
<body>
<div id="div1">
<ul id="zg">
<li>北京
<ul id="bj">
<li>西城区
<ul id="xc">
<li>西单</li>
<li>西单</li>
<li>西单</li>
</ul>
</li>
<li>东城区
<ul id="dc">
<li>东单</li>
<li>东单</li>
<li>东单</li>
</ul>
</li>
<li>崇文区</li>
</ul>
</li>
<li>河北
<ul id="hb">
<li>石家庄
<ul id="sjz">
<li>桥东</li>
<li>桥东</li>
<li>桥东</li>
</ul>
</li>
<li>保定</li>
<li>邢台</li>
</ul>
</li>
</ul>
</div>
</body>
</html> 展开
<html>
<head>
<style type="text/css">
*{margin:0;padding:0;}
#div1{position:absolute;}
li{list-style-type:none;text-align:center;width:70px;height:30px;line-height:30px;}
#zg li{background:blue;float:left;}
#zg li #bj li{background:green;}
#zg li #bj li #xc li{background:red;}
#xc,#sjz{position:relative;left:70px;top:-30px;}
#dc{position:relative;left:70px;top:-60px;}
#bj{display:none;}
#hb{display:none}
#xc{display:none;}
#dc{display:none;}
</style>
<script type="text/javascript">
onload = function ()
{
var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++)
{
lis[i].onmouseover = function ()
{
this.children[0] ? this.children[0].style.display = "block" : 0;
}
lis[i].onmouseout = function ()
{
this.children[0] ? this.children[0].style.display = "none" : 0;
}
}
}
</script>
</head>
<body>
<div id="div1">
<ul id="zg">
<li>北京
<ul id="bj">
<li>西城区
<ul id="xc">
<li>西单</li>
<li>西单</li>
<li>西单</li>
</ul>
</li>
<li>东城区
<ul id="dc">
<li>东单</li>
<li>东单</li>
<li>东单</li>
</ul>
</li>
<li>崇文区</li>
</ul>
</li>
<li>河北
<ul id="hb">
<li>石家庄
<ul id="sjz">
<li>桥东</li>
<li>桥东</li>
<li>桥东</li>
</ul>
</li>
<li>保定</li>
<li>邢台</li>
</ul>
</li>
</ul>
</div>
</body>
</html> 展开
1个回答
展开全部
首先a是内联标签，不适合做容器,帮你改了下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0; padding:0;}
ul{list-style:none}
#outer{width:60px; height:28px; position:relative; line-height:28px; text-align:center; font-size:12px; background-color:#999; cursor:pointer}
#outer ul{position:absolute; left:0; top:28px; width:60px; background-color:#666666; display:none}
</style>
</head>
<body>
<h1 style="text-align:center; color:#0000CC">实现原理：外围一个容器，相对定位；内部一个列表，绝对定位；当鼠标移过外围容器时候，列表显示；移动出时候，列表隐藏。</h1>
<div id="outer">
我的收藏
<ul>
<li>电影</li>
<li>游戏</li>
<li>音乐</li>
<li>图书</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
function menu(){//声明函数
var outer=document.getElementById("outer");//定义“outer”等于外围容器
outer.onmouseover=function(){//当outer鼠标移入时候执行：
this.getElementsByTagName("ul")[0].style.display="block";//this指outer本身；它下面的ul的样式display=block，也就是显示；
}
outer.onmouseout=function(){//当outer鼠标移出时候执行：
this.getElementsByTagName("ul")[0].style.display="none";//this指outer本身；它下面的ul的样式display=none，也就是隐藏；
}
}
menu();//执行函数
</script>
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
