CSS悬浮下拉菜单

这是前端时间课设时写的一个简单的下拉菜单,主要就是对CSS定位和选择器的使用,下面是实现代码:


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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
.list-menu{
display: flex;
background: #f7f7f7;
border-radius: 5px;
padding: 10px 0;
justify-content: space-around;
color: #205D67;
width: 80%;
}
.list-menu li{
list-style: none;
}
.list-menu li:hover > ul{
box-shadow: 0 0 10px #ccc;
display: block;
}
.list-menu li ul{
position: absolute;
display: none;
background: #fff;
border:1px #f7f7f7 solid;
border-radius: 5px;
width: 10%;
margin: 0;
padding: 0;
color:#205D67;
font-size: 0.9rem;
}
.list-menu li ul a{
text-decoration: none;
color:#205D67;
}
.list-menu li ul a li{
line-height: 30px;
padding-left:10%;
box-sizing: border-box;
width: 100%;
}
.list-menu li ul a li:hover{
background: #f7f7f7;
cursor: pointer;
}

HTML样例:

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
<ul class="list-menu">
<li>按算法分类
<ul>
<a href="#"><li>分治</li></a>
<a href="#"><li>贪心</li></a>
<a href="#"><li>链表</li></a>
<a href="#"><li>搜索</li></a>
<a href="#"><li>字符串</li></a>
<a href="#"><li>动态规划</li></a>
<a href="#"><li>图论</li></a>
</ul>
</li>
<li>按难易程度分类
<ul>
<a href="#"><li>简单</li></a>
<a href="#"><li>中等</li></a>
<a href="#"><li>很难</li></a>
<a href="#"><li>超难</li></a>
</ul>
</li>
<li>按数据结构分类
<ul>
<a href="#"><li>线性结构</li></a>
<a href="#"><li>树结构</li></a>
</ul>
</li>
</ul>

运行截图:

这里写图片描述


这是一个最普通但是很常用的下拉菜单,如果想要更复杂的就需要结合JS和更复杂的CSS嵌套。

-------------本文结束感谢您的阅读-------------