CSS教程 - 层叠样式表完整指南
CSS下拉菜单 - 创建实用导航菜单
CSS 下拉菜单 ¶
什么是CSS下拉菜单？ ¶
下拉菜单是网站导航中常用的功能，用户将鼠标悬停在某个菜单项上，相应的子菜单就会显示出来。使用纯CSS可以轻松实现下拉菜单，无需使用JavaScript脚本。
基本下拉菜单 ¶
以下是一个简单的CSS下拉菜单实例：
css
1/* 下拉菜单容器样式 */
2.dropdown {
3 position: relative;
4 display: inline-block;
5}
6
7/* 下拉按钮样式 */
8.dropbtn {
9 background-color: #4CAF50;
10 color: white;
11 padding: 16px;
12 font-size: 16px;
13 border: none;
14 cursor: pointer;
15}
16
17/* 下拉内容默认隐藏 */
18.dropdown-content {
19 display: none;
20 position: absolute;
21 background-color: #f9f9f9;
22 min-width: 160px;
23 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
24 z-index: 1;
25}
26
27/* 下拉菜单链接样式 */
28.dropdown-content a {
29 color: black;
30 padding: 12px 16px;
31 text-decoration: none;
32 display: block;
33}
34
35/* 鼠标移上链接后修改背景颜色 */
36.dropdown-content a:hover {
37 background-color: #f1f1f1;
38}
39
40/* 鼠标移到下拉菜单上时显示下拉菜单 */
41.dropdown:hover .dropdown-content {
42 display: block;
43}
44
45/* 鼠标移到下拉按钮上时修改下拉按钮的背景颜色 */
46.dropdown:hover .dropbtn {
47 background-color: #3e8e41;
48}HTML结构:
html
1<div class="dropdown">
2 <button class="dropbtn">下拉菜单</button>
3 <div class="dropdown-content">
4 <a href="#">链接 1</a>
5 <a href="#">链接 2</a>
6 <a href="#">链接 3</a>
7 </div>
8</div>创建导航栏下拉菜单 ¶
下拉菜单通常是导航栏的一部分。以下是导航栏内下拉菜单的实例:
css
1/* 导航栏样式 */
2.navbar {
3 overflow: hidden;
4 background-color: #333;
5 font-family: Arial;
6}
7
8/* 导航栏链接 */
9.navbar a {
10 float: left;
11 font-size: 16px;
12 color: white;
13 text-align: center;
14 padding: 14px 16px;
15 text-decoration: none;
16}
17
18/* 下拉容器 */
19.dropdown {
20 float: left;
21 overflow: hidden;
22}
23
24/* 下拉按钮 */
25.dropdown .dropbtn {
26 font-size: 16px;
27 border: none;
28 outline: none;
29 color: white;
30 padding: 14px 16px;
31 background-color: inherit;
32 font-family: inherit;
33 margin: 0;
34}
35
36/* 导航栏链接和下拉按钮鼠标悬停时的样式 */
37.navbar a:hover, .dropdown:hover .dropbtn {
38 background-color: red;
39}
40
41/* 下拉菜单内容 */
42.dropdown-content {
43 display: none;
44 position: absolute;
45 background-color: #f9f9f9;
46 min-width: 160px;
47 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
48 z-index: 1;
49}
50
51/* 下拉菜单链接 */
52.dropdown-content a {
53 float: none;
54 color: black;
55 padding: 12px 16px;
56 text-decoration: none;
57 display: block;
58 text-align: left;
59}
60
61/* 下拉菜单链接悬停样式 */
62.dropdown-content a:hover {
63 background-color: #ddd;
64}
65
66/* 显示下拉菜单 */
67.dropdown:hover .dropdown-content {
68 display: block;
69}HTML结构:
html
1<div class="navbar">
2 <a href="#">首页</a>
3 <a href="#">新闻</a>
4 <div class="dropdown">
5 <button class="dropbtn">下拉菜单
6 <i class="fa fa-caret-down"></i>
7 </button>
8 <div class="dropdown-content">
9 <a href="#">链接 1</a>
10 <a href="#">链接 2</a>
11 <a href="#">链接 3</a>
12 </div>
13 </div>
14</div>多级下拉菜单 ¶
您还可以创建多级下拉菜单，允许用户在子菜单中继续展开更多选项：
css
1/* 多级下拉菜单样式 */
2.dropdown-submenu {
3 position: relative;
4}
5
6.dropdown-submenu .dropdown-menu {
7 top: 0;
8 left: 100%;
9 margin-top: -1px;
10 display: none;
11}
12
13.dropdown-submenu:hover .dropdown-menu {
14 display: block;
15}响应式下拉菜单 ¶
为了在移动设备上提供更好的用户体验，可以创建响应式下拉菜单，根据屏幕尺寸自动调整样式：
css
1@media screen and (max-width: 600px) {
2 .navbar a, .dropdown .dropbtn {
3 display: none;
4 }
5
6 .navbar a.icon {
7 float: right;
8 display: block;
9 }
10
11 .navbar.responsive {position: relative;}
12 .navbar.responsive a.icon {
13 position: absolute;
14 right: 0;
15 top: 0;
16 }
17
18 .navbar.responsive a {
19 float: none;
20 display: block;
21 text-align: left;
22 }
23
24 .navbar.responsive .dropdown {float: none;}
25 .navbar.responsive .dropdown-content {position: relative;}
26 .navbar.responsive .dropdown .dropbtn {
27 display: block;
28 width: 100%;
29 text-align: left;
30 }
31}通过这些CSS技术，您可以为网站创建美观且功能丰富的下拉菜单，提升用户体验和导航效率。