网页中鼠标移到一个菜单上,下面显示一排子菜单
2个回答
展开全部
<!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>
<title>简单实用的二级下拉菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
body{
text-align:center;
font-size:12px;
}
ul{
padding 0;
margin:0;
list-style:none;
}
li{
position:relative;
float: left;
width: 110px;
}
li ul{
position:absolute;
display:none;
top: 20px;left:30px;
}
li:hover ul,li.over ul{
display:block;
}
</style>
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div id="popimg">
<ul id="nav">
<li><a href="#">一级菜单一</a>
<ul>
<li><a href="#">菜单一二级一</a></li>
<li><a href="#">菜单一二级二</a></li>
<li><a href="#">菜单一二级三</a></li>
</ul>
</li>
<li><a href="#">一级菜单二</a>
<ul>
<li><a href="#">菜单二二级一</a></li>
<li><a href="#">菜单二二级二</a></li>
<li><a href="#">菜单二二级三</a></li>
</ul>
</li>
<li><a href="#">一级菜单三</a>
<ul>
<li><a href="#">菜单三二级一</a></li>
<li><a href="#">菜单三二级二</a></li>
<li><a href="#">菜单三二级三</a></li>
</ul>
</li>
<li><a href="#">一级菜单四</a>
<ul>
<li><a href="#">菜单四二级一</a></li>
<li><a href="#">菜单四二级二</a></li>
<li><a href="#">菜单四二级三</a></li>
</ul>
</li>
<li><a href="#">一级菜单五</a>
<ul>
<li><a href="#">菜单五二级一</a></li>
<li><a href="#">菜单五二级二</a></li>
<li><a href="#">菜单五二级三</a></li>
</ul>
</li>
<li><a href="#">一级菜单六</a>
<ul>
<li><a href="#">菜单六二级一</a></li>
<li><a href="#">菜单六二级二</a></li>
<li><a href="#">菜单六二级三</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>简单实用的二级下拉菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
body{
text-align:center;
font-size:12px;
}
ul{
padding 0;
margin:0;
list-style:none;
}
li{
position:relative;
float: left;
width: 110px;
}
li ul{
position:absolute;
display:none;
top: 20px;left:30px;
}
li:hover ul,li.over ul{
display:block;
}
</style>
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div id="popimg">
<ul id="nav">
<li><a href="#">一级菜单一</a>
<ul>
<li><a href="#">菜单一二级一</a></li>
<li><a href="#">菜单一二级二</a></li>
<li><a href="#">菜单一二级三</a></li>
</ul>
</li>
<li><a href="#">一级菜单二</a>
<ul>
<li><a href="#">菜单二二级一</a></li>
<li><a href="#">菜单二二级二</a></li>
<li><a href="#">菜单二二级三</a></li>
</ul>
</li>
<li><a href="#">一级菜单三</a>
<ul>
<li><a href="#">菜单三二级一</a></li>
<li><a href="#">菜单三二级二</a></li>
<li><a href="#">菜单三二级三</a></li>
</ul>
</li>
<li><a href="#">一级菜单四</a>
<ul>
<li><a href="#">菜单四二级一</a></li>
<li><a href="#">菜单四二级二</a></li>
<li><a href="#">菜单四二级三</a></li>
</ul>
</li>
<li><a href="#">一级菜单五</a>
<ul>
<li><a href="#">菜单五二级一</a></li>
<li><a href="#">菜单五二级二</a></li>
<li><a href="#">菜单五二级三</a></li>
</ul>
</li>
<li><a href="#">一级菜单六</a>
<ul>
<li><a href="#">菜单六二级一</a></li>
<li><a href="#">菜单六二级二</a></li>
<li><a href="#">菜单六二级三</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
js控制的。
不过现在都是用jquery来做会更简单。
在网上搜索 jQuery 导航条 很多的，下载个是实例研究研究就可以了。
收工，不多说了~有问题加百度账号聊吧。
不过现在都是用jquery来做会更简单。
在网上搜索 jQuery 导航条 很多的，下载个是实例研究研究就可以了。
收工，不多说了~有问题加百度账号聊吧。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
