网站导航栏，在鼠标放上去的时候，怎么样才能显示子菜单？
1个回答
展开全部
JS实现子菜单的显示和隐藏摘要内容：
<!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="
-
JS实现子菜单的显示和隐藏这篇文章的内容如下:
<!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" />
<style type="text/css">
a:link{text-decoration:none ;color:#ffffff ;}
a:visited {text-decoration:none ;color:#ffffff ;}
a:hover {text-decoration:underline ;color:#ffffff ;}
a:active {text-decoration:none ;color:#ffffff ;}
*{margin:0px; padding:0px;}
body{magin:0px; padding:0px; height:100%; width:100%;}
ul{margin:0px; padding:0px; list-style-type:none;}
li{display:block;width:120px;height:20px; background-color:#05a525; font-size:14px;}
.menu{width:120px;height:25px; background-color:#ff9900; font-size:16px;}
.left_div{background-color:#05a525; height:100%; width:120px;}
#pLine{text-size:14px; color:#ffffff;}
</style>
<script type="text/javascript">
function managerPanelSwitch(){
var ob = document.getElementById("managerPanel_ul");
if(ob.style.display ==""||ob.style.display =="block"){
ob.style.display = "none";
}else{
ob.style.display = "block";
}
}
</script>
</head>
<body>
<div class="left_div">
<div>
<div class="menu" id="managerPanel" onclick="managerPanelSwitch()" >--系统管理</div>
<ul id="managerPanel_ul" style="display:block">
<li><a href="#" target="right">｜全局设置</a></li>
<li><a href="#" target="right">｜用户管理</a></li>
<li><a href="#" target="right">｜角色管理</a></li>
<li><a href="#" target="right">｜权限管理</a></li>
</ul>
</div>
<div class="menu" id="guestPanel">--访客留言</div>
<ul id="guestPanle_ul">
<li><a href="#" target="right">｜发表留言</a></li>
<li><a href="#" target="right">｜本人留言</a></li>
<li><a href="#" target="right">｜在线人数</a></li>
</ul>
<div>
</div>
<div>
<p id="pLine">-------------</p>
</div>
</div>
</body>
</html>
<!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="
-
JS实现子菜单的显示和隐藏这篇文章的内容如下:
<!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" />
<style type="text/css">
a:link{text-decoration:none ;color:#ffffff ;}
a:visited {text-decoration:none ;color:#ffffff ;}
a:hover {text-decoration:underline ;color:#ffffff ;}
a:active {text-decoration:none ;color:#ffffff ;}
*{margin:0px; padding:0px;}
body{magin:0px; padding:0px; height:100%; width:100%;}
ul{margin:0px; padding:0px; list-style-type:none;}
li{display:block;width:120px;height:20px; background-color:#05a525; font-size:14px;}
.menu{width:120px;height:25px; background-color:#ff9900; font-size:16px;}
.left_div{background-color:#05a525; height:100%; width:120px;}
#pLine{text-size:14px; color:#ffffff;}
</style>
<script type="text/javascript">
function managerPanelSwitch(){
var ob = document.getElementById("managerPanel_ul");
if(ob.style.display ==""||ob.style.display =="block"){
ob.style.display = "none";
}else{
ob.style.display = "block";
}
}
</script>
</head>
<body>
<div class="left_div">
<div>
<div class="menu" id="managerPanel" onclick="managerPanelSwitch()" >--系统管理</div>
<ul id="managerPanel_ul" style="display:block">
<li><a href="#" target="right">｜全局设置</a></li>
<li><a href="#" target="right">｜用户管理</a></li>
<li><a href="#" target="right">｜角色管理</a></li>
<li><a href="#" target="right">｜权限管理</a></li>
</ul>
</div>
<div class="menu" id="guestPanel">--访客留言</div>
<ul id="guestPanle_ul">
<li><a href="#" target="right">｜发表留言</a></li>
<li><a href="#" target="right">｜本人留言</a></li>
<li><a href="#" target="right">｜在线人数</a></li>
</ul>
<div>
</div>
<div>
<p id="pLine">-------------</p>
</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
