鼠标滑过目标时，就会自动弹出一个下拉列表，且下拉列表的各项可以点击（可以是超链接等等），原理就是通过onmouseout和oumouseover事件来控制层的display属性的block和none，可就是做不成功，请大家帮我做一个简单的，谢谢了
第一种方法：
<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>
温馨提示：答案为网友推荐，仅供参考
第1个回答 2011-11-30
我以前写过一个超级简单的 下拉菜单， 你可以参考我的博客。 注意如果你的编码不是UTF-8，请修改 head里的 meta 部分的编码修改为 GB2312 ，详细请参考我的博客。
第2个回答 2011-11-30
下载这个就是了
