文档章节

向右方向的二级菜单

o
 osc_z1hvg4cu
发布于 2018/04/24 18:00
字数 535
阅读 7
收藏 0

精选30+云产品,助力企业轻松上云!>>>

  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>

 


o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

SnailSVN Pro for mac(SVN客户端) v1.9.9

macw为您带来SnailSVN Pro for mac ,SnailSVN Mac版是一款类似于 TortoiseSVN 的 Apache Subversion(SVN)客户端,与 Finder 紧密集成。SnailSVN Mac版允许你从 Finder 的上下文菜单中快速...

单手绕月
7分钟前
0
0
python网络编程(进程与多线程)

multiprocessing模块   由于GIL的存在,python中的多线程其实并不是真正的多线程,如果想要充分地使用多核CPU的资源,在python中大部分情况需要使用多进程。   multiprocessing包是Pytho...

osc_ky74f26k
7分钟前
0
0
CentOS7 redis5.0高可用部署

概述 Redis Sentinel为Redis提供高可用性。Redis Sentinel是一个分布式系统,Sentinel本身设计为在有多个Sentinel进程协同合作的配置中运行。具有多个Sentinel进程进行协作的优点如下: 1、当...

紅顏為君笑
8分钟前
0
0
Ocelot简易教程(四)之请求聚合以及服务发现

上篇文章给大家讲解了Ocelot的一些特性并对路由进行了详细的介绍,今天呢就大家一起来学习下Ocelot的请求聚合以及服务发现功能。希望能对大家有所帮助。 作者:依乐祝 原文地址:https://www...

osc_zo0djpuu
9分钟前
0
0
leetcode63(不同路径 II)--Java语言实现

求: 一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为“Start” )。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角(在下图中标记为“Finish”)。 现在...

拓拔北海
9分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部