JavaScript实现级联式下拉菜单

最新推荐文章于 2022-04-01 10:12:24 发布

hjl_168562

最新推荐文章于 2022-04-01 10:12:24 发布

阅读量618

点赞数

分类专栏： Web Fronted

本文链接：https://blog.csdn.net/hjl_168562/article/details/8114478

版权

Web Fronted 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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 runat="server">
  <title>JavaScript下拉菜单(样例)</title>
  <style type="text/css">
   * {
    padding:0;
    margin:0;
   }
   body {
    font-family:verdana, sans-serif;
    font-size:small;
   }
   #navigation, #navigation li ul {
    list-style-type:none;
   }
   #navigation {
    margin:20px;
   }
   #navigation li {
    float:left;
    text-align:center;
    position:relative;
   }
   #navigation li a:link, #navigation li a:visited {
    display:block;
    text-decoration:none;
    color:#000;
    width:120px;
    height:40px;
    line-height:40px;
    border:1px solid #fff;
    border-width:1px 1px 0 0;
    background:#c5dbf2;
    padding-left:10px;
   }
   #navigation li a:hover {
    color:#fff;
    background:#2687eb;
   }
   #navigation li ul li a:hover {
    color:#fff;
    background:#6b839c;
   }
   #navigation li ul {
    display:none;
    position:absolute;
    top:40px;
    left:0;
    margin-top:1px;
    width:120px;
   }
   #navigation li ul li ul {
    display:none;
    position:absolute;
    top:0px;
    left:130px;
    margin-top:0;
    margin-left:1px;
    width:120px;
   }
  </style>
  <script type="text/javascript">
   function displaySubMenu(li) {
    var subMenu = li.getElementsByTagName("ul")[0];
    subMenu.style.display = "block";
   }
   function hideSubMenu(li) {
    var subMenu = li.getElementsByTagName("ul")[0];
    subMenu.style.display = "none";
   }
  </script>
</head>
<body>
  <ul id="navigation">
   <li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)">
    <a href="#">栏目1</a>
    <ul>
     <li><a href="#">栏目1->菜单1</a></li>
     <li><a href="#">栏目1->菜单2</a></li>
     <li><a href="#">栏目1->菜单3</a></li>
     <li><a href="#">栏目1->菜单4</a></li>
    </ul>
   </li>
   <li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)">
    <a href="#">栏目2</a>
    <ul>
     <li><a href="#">栏目2->菜单1</a></li>
     <li><a href="#">栏目2->菜单2</a></li>
     <li><a href="#">栏目2->菜单3</a></li>
     <li><a href="#">栏目2->菜单4</a></li>
     <li><a href="#">栏目2->菜单5</a></li>
    </ul>
   </li>
   <li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)">
    <a href="#">栏目3</a>
    <ul>
     <li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)">
      <a href="#">栏目3->菜单1</a>
      <ul>
       <li><a href="#">菜单1->子菜单1</a></li>
       <li><a href="#">菜单1->子菜单2</a></li>
       <li><a href="#">菜单1->子菜单3</a></li>
       <li><a href="#">菜单1->子菜单4</a></li>
      </ul>
     </li>
     <li><a href="#">栏目3->菜单2</a></li>
     <li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)">
      <a href="#">栏目3->菜单3</a>
      <ul>
       <li><a href="#">菜单3->子菜单1</a></li>
       <li><a href="#">菜单3->子菜单2</a></li>
       <li><a href="#">菜单3->子菜单3</a></li>
      </ul>
     </li>
    </ul>
   </li>
  </ul>
</body>
</html>

hjl_168562

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现级联式下拉菜单

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml" > JavaScript下拉菜单(样例) * { padding:0; margin:0; } body { font-family:verdana
复制链接

扫一扫