向右方向的二级菜单 

  1 <!DOCTYPE html>
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5     <title>制作二级菜单</title>
  6     <style type="text/css">
  7         body {
  8             margin: 0;
  9             padding: 0;
 10             font-family: Verdana,Arial,Helvetica,sans-serif;
 11             font-size: 12px;
 12             line-height: 1.5;
 13         }
 14 
 15         #menu ul {
 16             margin: 0;
 17             padding: 0;
 18             list-style: none;
 19             border: 1px solid #ccc;
 20             width: 100px;
 21         }
 22 
 23             #menu ul li {
 24                 background-color: #eee;
 25                 height: 26px;
 26                 line-height: 26px;
 27                 border-bottom: 1px solid #ccc;
 28             }
 29 
 30                 #menu ul li a {
 31                     color: #000;
 32                     text-decoration: none;
 33                 }
 34 
 35                     #menu ul li a:hover {
 36                         color: #ff0000;
 37                     }
 38 
 39                 #menu ul li ul {
 40                     display: none;
 41                     position: absolute;
 42                     left: 100px;
 43                     top: 0px;
 44                 }
 45 
 46                 #menu ul li.current ul {
 47                     display: block;
 48                 }
 49     </style>
 50     <script type="text/javascript">
 51         startList = function () {
 52             navRoot = document.getElementById("menu");
 53             var allli = navRoot.getElementsByTagName("li");
 54             for (i = 0; i < allli.length; i++) {
 55                 node = allli[i];
 56                 node.onmouseover = function () {
 57                     this.className += "current";
 58                 }
 59                 node.onmouseout = function () {
 60                     this.className = this.className.replace("current", "");
 61                 }
 62             }
 63         }
 64         window.onload = startList;
 65     </script>
 66 </head>
 67 <body>
 68     <div id="menu">
 69         <ul>
 70             <li><a href="#">PS</a>
 71                 <ul>
 72                     <li class="current"><a href="#">二级菜单列表1</a></li>
 73                     <li class="current"><a href="#">二级菜单列表2</a></li>
 74                 </ul>
 75             </li>
 76             <li><a href="#">Jave</a>
 77                 <ul>
 78                     <li class="current"><a href="#">二级菜单列表5</a></li>
 79                     <li class="current"><a href="#">二级菜单列表6</a></li>
 80                     <li class="current"><a href="#">二级菜单列表7</a></li>
 81                     <li class="current"><a href="#">二级菜单列表8</a></li>
 82                     <li class="current"><a href="#">二级菜单列表8</a></li>
 83                 </ul>
 84             </li>
 85             <li><a href="#">php</a>
 86                 <ul>
 87                     <li class="current"><a href="#">二级菜单列表9</a></li>
 88                     <li class="current"><a href="#">二级菜单列表10</a></li>
 89                     <li class="current"><a href="#">二级菜单列表11</a></li>
 90                     <li class="current"><a href="#">二级菜单列表12</a></li>
 91                 </ul>
 92             </li>
 93             <li><a href="#">.net</a>
 94                 <ul>
 95                     <li class="current"><a href="#">二级菜单列表13</a></li>
 96                     <li class="current"><a href="#">二级菜单列表14</a></li>
 97                     <li class="current"><a href="#">二级菜单列表15</a></li>
 98                     <li class="current"><a href="#">二级菜单列表16</a></li>
 99                     <li class="current"><a href="#">二级菜单列表15</a></li>
100                     <li class="current"><a href="#">二级菜单列表16</a></li>
101                 </ul>
102             </li>
103         </ul>
104     </div>
105 </body>
106 </html>

 


posted @ 2018-04-24 18:00  ProvokeXun  阅读(306)  评论(0)    收藏  举报