如何用jquery实现鼠标悬停显示隐藏的菜单
2个回答
展开全部
<script type="text/javascript">
$(document).ready(function()
{
$("#hidden_menu").hide();
$("#categort").mouseover(function(){
$("#hidden_menu").show();
});
$("#hidden_menu").mouseout(function(){
$(this).hide();
});
</script>
<div id="category"><a href="#">category</a></div>
<div id="hidden_menu">
<div class="round_corner_left"></div>
<div class="round_corner_reeat"><a>这里历遍数据库得到的各种分类名称</a></div>
<div class="round_corner_right"></div>
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!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>
<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<style>
*{margin:0px;padding:0px;}
body{background:#cccccc;}
ul,ol{list-style-type:none;display:none;}
.menu div{
width:220px;
}
.menu p{
width:220px;
height:35px;
line-height:35px;
background:#99CC33;
border-bottom:1px solid #333333;
text-align:center;
cursor:pointer;
}
.menu ul{
width:220px;
}
ul{
height:auto;
margin:1px auto;
background:#99CCCC;
text-align:center;
}
ul li{
width:220px;
height:30px;
line-height:30px;
text-align:center;
}
ul li:hover{background:#ccff33;}
ul li a{text-decoration:none;}
</style>
<script>
$(function(){
$(".menu p").hover(function(){
$(".menuItem").hide();
$(this).next("ul").show();
},function(){
})
});
</script>
</head>
<body>
<div class="menu">
<div>
<p>网站管理</p>
<ul class="menuItem">
<li><a href="siteInfo.php" target="main">网站基本信息</a></li>
<li><a href="updateSite.php" target="main">网站配置</a></li>
</ul>
</div>
<div>
<p>权限管理</p>
<ul class="menuItem">
<li><a href="userGroupList.php" target="main">用户组列表</a></li>
<li><a href="usersPower.php" target="main">用户权限列表</a></li>
</ul>
</div>
<div>
<p>用户管理</p>
<ul class="menuItem">
<li><a href="userList.php" target="main">用户列表</a></li>
<li><a href="addUser.php" target="main">添加用户</a></li>
</ul>
</div>
</div>
</body>
</html>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
