首页 > 代码库 > 纯CSS实现二级导航下拉菜单--css的简单应用
纯CSS实现二级导航下拉菜单--css的简单应用
思想：使用css的display属性控制二级下拉菜单的显示与否。当鼠标移动到一级导航菜单的li标签时，显示二级导航菜单的ul标签。由于实现起来比较简单，所以在这里直接给出了参考代码。
1、纯CSS二级导航下拉菜单代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" content="text/html" http-equiv="content-type">
5 <title>纯css二级导航下拉菜单</title>
6 <meta name="keyword" content="关键字">
7 <meta name="description" content="描述">
8 <style type="text/css">
9 *{margin: 0;padding: 0;}
10 #bg{background: red;width: 100%;height: 35px;}
11 nav{height: 35px;width: 1000px;margin: 0 auto;}
12 nav ul li{list-style-type:none;float: left}
13 nav ul li a{ text-decoration: none;display: block;width: 130px;line-height: 35px;text-align: center;
14 color:white;font-fimily:微软雅黑;}
15 nav ul li ul li{float: none}
16 nav ul li ul li a{color:black}
17 nav ul li ul{display: none;}
18 nav ul li:hover ul{display: block;}
19 </style>
20 </head>
21 <body>
22 <div id="bg">
23 <nav>
24 <ul>
25 <li><a href="#">一级导航</a>
26 <ul>
27 <li><a href="#">二级导航</a></li>
28 <li><a href="#">二级导航</a></li>
29 <li><a href="#">二级导航</a></li>
30 <li><a href="#">二级导航</a></li>
31 </ul>
32 </li>
33 <li><a href="#">一级导航</a>
34 <ul>
35 <li><a href="#">二级导航</a></li>
36 <li><a href="#">二级导航</a></li>
37 <li><a href="#">二级导航</a></li>
38 </ul>
39 </li>
40 <li><a href="#">一级导航</a>
41 <ul>
42 <li><a href="#">二级导航</a></li>
43 <li><a href="#">二级导航</a></li>
44 <li><a href="#">二级导航</a></li>
45 <li><a href="#">二级导航</a></li>
46 </ul>
47 </li>
48 <li><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 <li><a href="#">一级导航</a>
56 <ul>
57 <li><a href="#">二级导航</a></li>
58 <li><a href="#">二级导航</a></li>
59 <li><a href="#">二级导航</a></li>
60 <li><a href="#">二级导航</a></li>
61 <li><a href="#">二级导航</a></li>
62 </ul>
63 </li>
64 <li><a href="#">一级导航</a>
65 <ul>
66 <li><a href="#">二级导航</a></li>
67 <li><a href="#">二级导航</a></li>
68 <li><a href="#">二级导航</a></li>
69 <li><a href="#">二级导航</a></li>
70 </ul>
71 </li>
72 <li><a href="#">一级导航</a>
73 <ul>
74 <li><a href="#">二级导航</a></li>
75 <li><a href="#">二级导航</a></li>
76 </ul>
77 </li>
78 </ul>
79 </nav>
80 </div>
81 </body>
82 </html>
2、运行效果:
源码：纯CSS实现二级导航下拉菜单.zip
备注：
文章为本人原创 转载请注明出处 文章难免会有纰漏之处 还望大家多多包含 如有意见或者建议可与本人联系 本人QQ：2187093468（非诚请勿扰，加好友请备注在哪里看到的）
纯CSS实现二级导航下拉菜单--css的简单应用
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。