HTML+CSS实现简单三级菜单

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>三级菜单练习</title>
  6 </head>
  7 <link rel="stylesheet" href="menu.css" type="text/css" />
  8 <body>
  9     <div>
 10         <ul id="nav">
 11             <li>
 12                 <a href="">一级菜单</a>
 13                 <ul>
 14                     <li>
 15                     <a href="">二级菜单</a>
 16                     <ul>
 17                         <li><a href="">三级菜单</a></li>
 18                         <li><a href="">三级菜单</a></li>
 19                         <li><a href="">三级菜单</a></li>
 20                         <li><a href="">三级菜单</a></li>
 21                         <li><a href="">三级菜单</a></li>
 22                         <li><a href="">三级菜单</a></li>
 23                         <li><a href="">三级菜单</a></li>
 24                         <li><a href="">三级菜单</a></li>
 25                         <li><a href="">三级菜单</a></li>
 26                     </ul>
 27                     </li>
 28                     <li>
 29                     <a href="">二级菜单</a>
 30                     <ul>
 31                         <li><a href="">三级菜单</a></li>
 32                         <li><a href="">三级菜单</a></li>
 33                         <li><a href="">三级菜单</a></li>
 34                         <li><a href="">三级菜单</a></li>
 35                         <li><a href="">三级菜单</a></li>
 36                         <li><a href="">三级菜单</a></li>
 37                     </ul>
 38                     </li>
 39                     <li>
 40                     <a href="">二级菜单</a>
 41                     <ul>
 42                         <li><a href="">三级菜单</a></li>
 43                         <li><a href="">三级菜单</a></li>
 44                         <li><a href="">三级菜单</a></li>
 45                     </ul>
 46                     </li>
 47                     <li>
 48                     <a href="">二级菜单</a>
 49                     <ul>
 50                         <li><a href="">三级菜单</a></li>
 51                         <li><a href="">三级菜单</a></li>
 52                         <li><a href="">三级菜单</a></li>
 53                     </ul>
 54                     </li>
 55                 </ul>
 56             </li>
 57             <li>
 58                 <a href="">一级菜单</a>
 59                 <ul>
 60                     <li>
 61                         <a href="">二级菜单</a>
 62                         <ul>
 63                             <li><a href="">三级菜单</a></li>
 64                             <li><a href="">三级菜单</a></li>
 65                             <li><a href="">三级菜单</a></li>
 66                         </ul>
 67                     </li>
 68                     <li>
 69                         <a href="">二级菜单</a>
 70                         <ul>
 71                             <li><a href="">三级菜单</a></li>
 72                             <li><a href="">三级菜单</a></li>
 73                             <li><a href="">三级菜单</a></li>
 74                         </ul>
 75                         </li>
 76                     <li>
 77                         <a href="">二级菜单</a>
 78                         <ul>
 79                             <li><a href="">三级菜单</a></li>
 80                             <li><a href="">三级菜单</a></li>
 81                             <li><a href="">三级菜单</a></li>
 82                         </ul>
 83                     </li>
 84                     <li>
 85                         <a href="">二级菜单</a>
 86                         <ul>
 87                             <li><a href="">三级菜单</a></li>
 88                             <li><a href="">三级菜单</a></li>
 89                             <li><a href="">三级菜单</a></li>
 90                         </ul>
 91                     </li>
 92                 </ul>
 93             </li>
 94             <li>
 95                 <a href="">一级菜单</a>
 96                 <ul>
 97                     <li>
 98                         <a href="">二级菜单</a>
 99                         <ul>
100                             <li><a href="">三级菜单</a></li>
101                             <li><a href="">三级菜单</a></li>
102                             <li><a href="">三级菜单</a></li>
103                         </ul>
104                     </li>
105                     <li>
106                         <a href="">二级菜单</a>
107                         <ul>
108                             <li><a href="">三级菜单</a></li>
109                             <li><a href="">三级菜单</a></li>
110                             <li><a href="">三级菜单</a></li>
111                         </ul>
112                     </li>
113                     <li>
114                         <a href="">二级菜单</a>
115                         <ul>
116                             <li><a href="">三级菜单</a></li>
117                             <li><a href="">三级菜单</a></li>
118                             <li><a href="">三级菜单</a></li>
119                         </ul>
120                     </li>
121                     <li>
122                         <a href="">二级菜单</a>
123                         <ul>
124                             <li><a href="">三级菜单</a></li>
125                             <li><a href="">三级菜单</a></li>
126                             <li><a href="">三级菜单</a></li>
127                         </ul>
128                     </li>
129                 </ul>
130             </li>
131             <li>
132                 <a href="">一级菜单1</a>
133                 <ul>
134                     <li>
135                         <a href="">二级菜单</a>
136                         <ul>
137                             <li><a href="">三级菜单</a></li>
138                             <li><a href="">三级菜单</a></li>
139                             <li><a href="">三级菜单</a></li>
140                         </ul>
141                     </li>
142                     <li>
143                         <a href="">二级菜单</a>
144                         <ul>
145                             <li><a href="">三级菜单</a></li>
146                             <li><a href="">三级菜单</a></li>
147                             <li><a href="">三级菜单</a></li>
148                         </ul>
149                     </li>
150                     <li>
151                         <a href="">二级菜单2</a>
152                         <ul>
153                             <li><a href="">三级菜单1</a>|<a href="">三级菜单2</a></li>
154                             <li><a href="">三级菜单</a></li>
155                             <li><a href="">三级菜单</a></li>
156                         </ul>
157                     </li>
158                     <li>
159                         <a href="">二级菜单</a>
160                         <ul>
161                             <li><a href="http://www.baidu.com" target="_blank">三级菜单3</a></li>
162                             <li><a href="">三级菜单</a></li>
163                             <li><a href="">三级菜单</a></li>
164                         </ul>
165                     </li>
166                 </ul>
167             </li>
168         </ul>
169     </div>
170     <hr>
171     <p>...</p>
172 </body>
173 </html>
 1 *{
 2     margin: 0px;
 3     padding: 0px;
 4     text-decoration: none;
 5     list-style:none;
 6     color: black;
 7 }
 8 a{
 9     /*background-color: #aaa;*/
10     padding: 10px 20px;
11     font-size: 20px;
12     line-height: 44.3px;
13     font-weight: bold;
14     font-family: arial;
15     /*border: 1px solid black;*/
16 }
17 #nav>li>ul>li>a{
18     font-size: 18px;
19 }
20 #nav>li>ul>li>ul>li>a{
21     font-size: 16px;
22 }
23 #nav>li{
24     float: left;
25 }
26 #nav>li:hover>ul{
27     display: block;
28     position: absolute;
29 }
30 #nav>li>ul>li{
31     position: relative;
32 }
33 #nav>li>ul>li:hover>ul{
34     display: block;
35     position: absolute;
36     left: 120px;
37     top: 0px;
38     min-width: 150px;
39 }
40 #nav>li>ul>li:hover>ul>li{
41 }
42 #nav a:hover{
43     background-color: #f40;
44     color: #fff;
45 }
46 #nav>li>ul{
47     display: none;
48 }
49
50 #nav>li>ul>li>ul{
51     display: none;
52 }
53 div{
54     /*display: block;*/
55     margin-left: 400px;
56 }
57
58 div::after{
59     content: ‘‘;
60     display: block;
61     clear: both;
62 }

时间: 2024-11-09 01:24:50

HTML+CSS实现简单三级菜单的相关文章

Python之运用字典,制作简单三级菜单

menu = {             '北京':{                      '海淀区':{                                   '清华大学':{                                                   '经济管理学院':{}                                                   },                                   

css三级菜单效果

一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"> <title>css实现三级菜单</title> <style type="text/css"> *{margin:0;padding:0} ul{list-style:none} a{text-decoration:none} body{fon

纯css实现的三级水平导航菜单

vscode练习使用开发纯css的三级水平导航菜单.先上图: 1.html5布局 1 <html> 2 3 <head> 4 <meta charset="UTF-8"> 5 <title>水平导航菜单</title> 6 <link rel="stylesheet" href="reset.css"> 7 <link rel="stylesheet"

css三级菜单

<!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> <meta http-equiv="Content-

最最简单的菜单代码

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>最简单的菜单</title> 6 <style> 7 *{margin: 0;padding: 0;} 8 .moyu ul a{font-family

三级菜单制作

HTML代码: <body> <div class="navMenu"> <ul> <li><a href="#">首页</a> <ul> <li><a href="#">JavaScript+</a> <ul> <li><a href="#">三角函数</a>

新手小白 python之路 Day1 (三级菜单功能实现)

直接上需求: 实现一个多级菜单 三级菜单的实现 可以依次选择进入各个子菜单 也可以返回上级菜单 所需知识 列表 字典 需求也比较简单,但实际上做起来还是遇到许多的问题,我这边主要用到的知识点大概就是  字典 等 大致的思路 我是分别写了四个函数 Abnormal() 通过抛出异常来判断输入的编号是否合法 Province() 获取省级菜单 City() 获取市级菜单 Area() 获取区级菜单 来实现整个功能的,话不多说直接上代码了 #!/usr/bin/env python # -*- cod

js实现三级菜单的制作

HTML代码: <body> <div class="navMenu"> <ul> <li><a href="#">首页</a> <ul> <li><a href="#">JavaScript+</a> <ul> <li><a href="#">三角函数</a>

jquery的三级菜单

<!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> <meta http-equiv="Content-