CSS实现下拉菜单效果
在CSS中，你可以使用多种方法来创建下拉菜单效果。以下是一个基本的示例：
|
1
2
3
4
5
6
7
8
9
|
<div class="dropdown"> <button class="dropbtn">主菜单</button> <div class="dropdown-content"> <a href="#">下拉子菜单1</a> <a href="#">下拉子菜单2</a> <a href="#">下拉子菜单3</a> <a href="#">下拉子菜单4</a> </div></div> |
对应的CSS代码是：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
.dropdown { position: relative; display: inline-block;}.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;}.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block;}.dropdown-content a:hover {background-color: #f1f1f1;}.dropdown:hover .dropdown-content {display: block;}.dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none;} |
上述代码中，.dropdown 是主菜单的父容器，.dropdown-content 是下拉菜单的容器，包含具体的子菜单项。默认情况下，下拉菜单是隐藏的（display: none）。当鼠标悬停在主菜单上时，下拉菜单会显示（通过 :hover 伪类选择器和 display 属性实现）。每个子菜单项都是一个链接（a 标签），可以根据需要进行自定义样式。
