关于用jquery制作弹出式菜单的问题
发布网友
发布时间：2022-04-23 08:54
共2个回答
热心网友
时间：2022-04-23 07:57
把子菜单放在li里面
<!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=gb2312" />
<title>无标题文档</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<style>
li { list-style:none;}
.o .r { float:left; width:100px; height:30px; border:1px solid #CCCCCC;}
.r ul { display:none; background:#999999;}
.hover ul{ display:block;}
</style>
<ul class="o">
<li class="r"><a href="#">主</a>
<ul>
<li><a href="#">子</a></li>
<li><a href="#">子</a></li>
<li><a href="#">子</a></li>
</ul>
</li>
<li class="r"><a href="#">主</a></li>
<li class="r"><a href="#">主</a>
<ul>
<li><a href="#">子</a></li>
<li><a href="#">子</a></li>
</ul>
</li>
<li class="r"><a href="#">主</a></li>
<li class="r"><a href="#">主</a></li>
</ul>
<script>
$(".o > .r").hover(
function(){$(this).addClass("hover");},function(){$(this).removeClass("hover");}
);
</script>
</body>
</html>
热心网友
时间：2022-04-23 09:15
$(".menu").mouseover(function(){
$(this).find(".list").removeClass("hide");
});
$(".menu").mouseout(function(){
$(this).find(".list").addClass("hide");
});
.hide{display:none}
.menu .list{
position: absolute;
z-index: 99;
background: #EEE;
}
参考：http://hi.baidu.com/%D0%A1%CE%C4_%BC%C6%CB%E3%BB%FA/blog/item/1dff1a17b6333a1d5baf53f8.html
