谁会用DIV+CSS+JS做下拉列表，就是鼠标滑过就出现.......求一段简单的代码
鼠标滑过目标时，就会自动弹出一个下拉列表，且下拉列表的各项可以点击（可以是超链接等等），原理就是通过onmouseout和oumouseover事件来控制层的displa...
鼠标滑过目标时，就会自动弹出一个下拉列表，且下拉列表的各项可以点击（可以是超链接等等），原理就是通过onmouseout和oumouseover事件来控制层的display属性的block和none，可就是做不成功，请大家帮我做一个简单的，谢谢了
展开
3个回答
展开全部
第一种方法：
<html>
<head><title></title>
<style>
#rr{ width:500px; height:30px; list-style:none; padding:0;}
#rr li.dd{ float:left; margin-right:10px; margin-left:0; border:1px solid red; width:70px; text-align:center;}
#rr li.dd #tt{ list-style:none; padding:0; margin-left:0; display:none; margin-top:20px; width:70px;}
</style>
<script language="javascript">
function onMouseover()
{
var obj=document.getElementById("tt");
obj.style.display="block";
}
function onMouseout()
{
var obj=document.getElementById("tt");
obj.style.display="none";
}
</script>
</head>
<body>
<ul id="rr">
<li class="dd" id="gg" onmouseover="onMouseover()" onmouseout="onMouseout()"><a href="#">产品</a>
<ul id="tt">
<li><a href="#">避孕套</a></li>
<li><a href="#">伟哥</a></li>
<li><a href="#">充气娃娃</a></li>
</ul>
</li>
<li class="dd"><a href="#">首页</a></li>
<li class="dd"><a href="#">首页</a></li>
<li class="dd"><a href="#">首页</a></li>
</ul>
</body>
</html>
第二种方法：利用Jquery
<script src="jquery文件"></script>
<script language="javascript">
$(document).ready(function(){
$('#gg').hover(function(){
$('#tt').css('display','block');},function(){
$('#tt').css('display','none');
});
});
</script>
<html>
<head><title></title>
<style>
#rr{ width:500px; height:30px; list-style:none; padding:0;}
#rr li.dd{ float:left; margin-right:10px; margin-left:0; border:1px solid red; width:70px; text-align:center;}
#rr li.dd #tt{ list-style:none; padding:0; margin-left:0; display:none; margin-top:20px; width:70px;}
</style>
<script language="javascript">
function onMouseover()
{
var obj=document.getElementById("tt");
obj.style.display="block";
}
function onMouseout()
{
var obj=document.getElementById("tt");
obj.style.display="none";
}
</script>
</head>
<body>
<ul id="rr">
<li class="dd" id="gg" onmouseover="onMouseover()" onmouseout="onMouseout()"><a href="#">产品</a>
<ul id="tt">
<li><a href="#">避孕套</a></li>
<li><a href="#">伟哥</a></li>
<li><a href="#">充气娃娃</a></li>
</ul>
</li>
<li class="dd"><a href="#">首页</a></li>
<li class="dd"><a href="#">首页</a></li>
<li class="dd"><a href="#">首页</a></li>
</ul>
</body>
</html>
第二种方法：利用Jquery
<script src="jquery文件"></script>
<script language="javascript">
$(document).ready(function(){
$('#gg').hover(function(){
$('#tt').css('display','block');},function(){
$('#tt').css('display','none');
});
});
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我以前写过一个超级简单的 下拉菜单， 你可以参考我的博客。 注意如果你的编码不是UTF-8，请修改 head里的 meta 部分的编码修改为 GB2312 ，详细请参考我的博客。
http://hi.baidu.com/smallchicken/blog/item/bd290264cfad3cf8f63654cb.html
http://hi.baidu.com/smallchicken/blog/item/bd290264cfad3cf8f63654cb.html
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
