dw中那种鼠标放在上面显示下拉菜单怎么做？比如做一个首页的框，然后鼠标放在首页那个框时，自动下拉一
dw中那种鼠标放在上面显示下拉菜单怎么做？比如做一个首页的框，然后鼠标放在首页那个框时，自动下拉一个菜单，怎么做？...
dw中那种鼠标放在上面显示下拉菜单怎么做？比如做一个首页的框，然后鼠标放在首页那个框时，自动下拉一个菜单，怎么做？
展开
1个回答
展开全部
Js：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
function set()
{
var menu=document.getElementById("navJs").getElementsByTagName("li");
for(var i=0;i<menu.length;i++)
{
if(menu[i].className=="li_aJs")
{
menu[i].onmouseover=function()
{
this.getElementsByTagName("ul")[0].style.display="block";
this.getElementsByTagName("ul")[0].style.width="80px";
this.getElementsByTagName("ul")[0].style.height="100px";
this.getElementsByTagName("ul")[0].style.position="absolute";
}
menu[i].onmouseout=function()
{
this.getElementsByTagName("ul")[0].style.display="none";
}
}
}
}
window.onload=set;
</script>
<style>
*{margin:0 auto;font-size:12px;list-style:none;text-decoration:none;}
#navJs{line-height:24px;background:#666;width:320px;margin:0 auto;}
#navJs a{display:block;width:80px;text-align:center;}
a:hover{font-weight:bold;background:#333;color:#fff;}
#navJs li{width:80px;float:left;background:#ccc;}
#navJs li ul{display:none;}
#navJs li ul li{float:left;width:80px;background:#eee;}
#navJs li ul li a{display:block;width:60px;text-align:left;padding-left:20px;}
</style>
</head>
<body>
<ul id="navJs">
<li class="li_aJs"><a href="#">AAA</a>
<ul>
<li><a href="#">ASD</a></li>
<li><a href="#">CVr</a></li>
<li><a href="#">CDS</a></li>
</ul>
</li>
<li class="li_aJs"><a href="#">AAA</a>
<ul>
<li><a href="#">ASD</a></li>
<li><a href="#">CVr</a></li>
<li><a href="#">CDS</a></li>
</ul>
</li>
<li class="li_aJs"><a href="#">AAA</a>
<ul>
<li><a href="#">ASD</a></li>
<li><a href="#">CVr</a></li>
<li><a href="#">CDS</a></li>
</ul>
</li>
<li class="li_aJs"><a href="#">AAA</a>
<ul>
<li><a href="#">ASD</a></li>
<li><a href="#">CVr</a></li>
<li><a href="#">CDS</a></li>
</ul>
</li>
</ul>
</body>
</html>
CSS
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
*{margin:0;padding:0;font-size:24px;list-style:none;}
#nav{background:#666;}
#nav a{display:block;width:100px;}
#nav li{width:80px;float:left;background:#ccc;margin-left:20px;}
#nav li a:hover{background:#999;}
#nav li ul {display:none;}
#nav li:hover ul{display:block;}
#nav li ul {background:#000;}
#nav li ul li{width:140px;background:#eee;}
#nav li ul li a{display:block;}
#clear{position:absolute;top:20px;}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">AAA</a>
<ul>
<li><a href="#">ASD</a></li>
<li><a href="#">CVr</a></li>
<li><a href="#">CDS</a></li>
</ul>
</li>
</ul>
<ul id="nav">
<li><a href="#">BBB</a>
<ul>
<li><a href="#">ASD</a></li>
<li><a href="#">CVr</a></li>
<li><a href="#">CDS</a></li>
</ul>
</li>
</ul>
<ul id="nav">
<li><a href="#">CCC</a>
<ul>
<li><a href="#">ASD</a></li>
<li><a href="#">CVr</a></li>
<li><a href="#">CDS</a></li>
</ul>
</li>
</ul>
<div id="clear">
rfdgbhg<br>rfdgbhg<br>rfdgbhg<br>rfdgbhg<br>rfdgbhg<br>rfdgbhg<br>rfdgbhg<br>rfdgbhg<br>rfdgbhg<br>rfdgbhg<br>
</div>
</body>
</html>
更多追问追答
追问
谢谢
我关注你，以后有问题希望帮帮我
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
