网页中鼠标移到一个菜单上,下面显示一排子菜单

移出，子菜单就没了，点击子菜单可以链接到别的页面，这种效果怎么实现的？子菜单是怎么做的？... 移出，子菜单就没了，点击子菜单可以链接到别的页面，这种效果怎么实现的？子菜单是怎么做的？展开

 我来答

2个回答

#热议# 上班途中天气原因受伤算工伤吗？

携手就是一个家
推荐于2019-01-27 · 超过18用户采纳过TA的回答

知道答主

回答量：76

采纳率：0%

帮助的人：58.7万

我也去答题访问个人页

关注

展开全部

<!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>


本回答被提问者和网友采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起