html下拉菜单怎么浮起来,CSS悬浮下拉菜单

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

CSS代码：

.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样例：

• 按算法分类

• 分治

贪心

链表

搜索

字符串

动态规划

图论

按难易程度分类

简单

中等

很难

超难

按数据结构分类

线性结构

树结构

运行截图：

这里写图片描述

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