zoukankan html css js c++ java

纯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（非诚请勿扰，加好友请备注在哪里看到的）

查看全文

相关阅读:
Makoto and a Blackboard CodeForces
Bash Plays with Functions CodeForces
2016 计蒜之道初赛第一场 D 青云的机房组网方案 (虚树)
常用数论函数求和公式
 AC日记——元素查找 codevs 1230
AC日记——鬼谷子的钱袋 codevs 2998
AC日记——接龙游戏 codevs 1051
AC日记——逆波兰表达式 openjudge 3.3 1696
AC日记——欧几里得的游戏洛谷 P1290
AC日记——刺激 codevs 1958

原文地址：https://www.cnblogs.com/qikeyishu/p/7215772.html

纯CSS实现二级导航下拉菜单--css的简单应用

思想：使用css的display属性控制二级下拉菜单的显示与否。当鼠标移动到一级导航菜单的li标签时，显示二级导航菜单的ul标签。由于实现起来比较简单，所以在这里直接给出了参考代码。

1、纯CSS二级导航下拉菜单代码：

2、运行效果:

源码：纯CSS实现二级导航下拉菜单.zip

备注：

文章为本人原创 转载请注明出处 文章难免会有纰漏之处 还望大家多多包含 如有意见或者建议可与本人联系 本人QQ：2187093468（非诚请勿扰，加好友请备注在哪里看到的）

　　文章为本人原创转载请注明出处文章难免会有纰漏之处还望大家多多包含如有意见或者建议可与本人联系本人QQ：2187093468（非诚请勿扰，加好友请备注在哪里看到的）