纯css实现的鼠标悬停下拉菜单

最新推荐文章于 2024-10-30 15:44:28 发布

mus_木司

最新推荐文章于 2024-10-30 15:44:28 发布

阅读量4.4k

点赞数 2

分类专栏：前端文章标签： html css

本文链接：https://blog.youkuaiyun.com/mus123/article/details/103945698

版权

该博客介绍了如何使用纯CSS实现鼠标悬停的下拉菜单，改进后的代码允许菜单高度根据li元素数量动态调整，并可通过设置菜单宽度实现垂直或水平布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考链接：https://blog.youkuaiyun.com/qq_28919991/article/details/82990306
下面是调整后的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯css悬停下拉菜单</title>
    <style>
        *{
   
            margin: 0;
            padding: 0;
        }
        div.item{
   
            float:left;
            width:20em;

        }
        li{
   
            list-style: none;

        }
        .menu{
   
            width: 100%;/*25%是垂直列表，100%是水平列表*/
            height: auto;
            margin: 40px auto;
            position:absolute;
        }
        .item{
   
            width: 100%;
            height: auto;
        }
        .item  h3{
   
            height: 40px;
            line-height: 40px;
            background-color: #7dffe7;
            color: orange;
            border-bottom: 2px solid #ccc;
            padding-left: 10px