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嵌套。