如何为导航栏每个列表项添加悬停触发的下拉菜单

1. 修改HTML结构 #

给每个主导航列表项添加下拉子菜单，调整后结构如下：

<div class="lowernav">
    <div class="lowernav-firstpart">
        <img src="logo.svg" alt="Logo" width="132" height="30">
        <nav>
            <ul class="main-nav">
                <li>
                    <a href="#">Solutions</a>
                    <ul class="dropdown">
                        <li><a href="#">企业解决方案</a></li>
                        <li><a href="#">小型团队方案</a></li>
                        <li><a href="#">行业定制方案</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Product</a>
                    <ul class="dropdown">
                        <li><a href="#">核心功能</a></li>
                        <li><a href="#">更新日志</a></li>
                        <li><a href="#">API文档</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Customers</a>
                    <ul class="dropdown">
                        <li><a href="#">客户案例</a></li>
                        <li><a href="#">客户评价</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Partners</a>
                    <ul class="dropdown">
                        <li><a href="#">合作伙伴招募</a></li>
                        <li><a href="#">合作案例</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Resources</a>
                    <ul class="dropdown">
                        <li><a href="#">博客</a></li>
                        <li><a href="#">白皮书</a></li>
                        <li><a href="#">教程</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Pricing</a>
                    <ul class="dropdown">
                        <li><a href="#">基础版</a></li>
                        <li><a href="#">专业版</a></li>
                        <li><a href="#">企业版</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
    <button><a style="color:white;"><b>CONTACT US</b></a></button>
</div>

2. 调整CSS样式 #

修正原CSS的布局问题，添加下拉菜单的交互样式：

/* 重置默认列表样式，消除浏览器默认偏差 */
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

li{
    margin-left: -2px;
    display: inline-block;
    font-size: medium;
}

a{
    display: block;
    text-decoration: none;
    color:rgb(90, 88, 88);
}

a:hover{
    color: black;
}

/* Lowernav */
.lowernav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    padding: 0 60px;
    height: 100px;
    width: 100%; /* 修正原错误：width:100改为100% */
    background-color: white;
    box-sizing: border-box; /* 避免padding撑宽容器 */
}

.lowernav-firstpart {
    display: flex;
    justify-content: space-between;
    width: 65%;
    align-items: center;
}

/* 主导航样式 */
.main-nav > li {
    position: relative; /* 为下拉菜单提供定位基准 */
    height: 100px;
    line-height: 100px;
    text-align: center;
    padding: 0 20px; /* 将原a标签的padding移到li上，扩大hover触发区域 */
}

.main-nav > li:hover{
    background-color: rgb(246, 247, 249);
}

/* 下拉菜单样式 */
.dropdown {
    position: absolute; /* 绝对定位，脱离文档流，不影响主布局 */
    top: 100%; /* 紧贴主菜单底部 */
    left: 0;
    background-color: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    width: 200px;
    display: none; /* 默认隐藏 */
}

.dropdown li {
    display: block; /* 子菜单纵向排列 */
    height: auto;
    line-height: normal;
    padding: 12px 16px;
    text-align: left;
}

.dropdown li:hover {
    background-color: rgb(246, 247, 249);
}

/* 鼠标悬停主菜单时显示下拉 */
.main-nav > li:hover .dropdown {
    display: block;
}

/* button */
.lowernav button{
    padding: 14px;
    font-size: 14px;
    background-color: rgb(13, 82, 255);
    border: none;
    border-radius: 10px;
}

.lowernav button a {
    color: white; /* 统一设置按钮内链接颜色，替代行内样式 */
}

关键修复点说明 #

• 给主导航li添加position: relative，让下拉菜单相对于它定位，避免脱离正常布局流
• 下拉菜单使用position: absolute，默认隐藏、hover时显示，不会挤压主页面内容
• 重置ul的默认margin和padding，消除浏览器默认样式带来的布局偏差
• 修正.lowernav的宽度属性，并添加box-sizing: border-box避免padding撑宽容器
• 将主导航的padding从a标签移到li上，扩大hover触发区域，提升交互体验

内容的提问来源于stack exchange，提问作者Taha