如何仅用CSS实现鼠标悬停后保持下拉菜单展开

问题核心 #

• 鼠标离开主菜单项时，下拉菜单随即消失，无法点击下拉内容
• 下拉菜单未定位在主按钮正下方，布局不符合需求
• 需要保持代码的响应式特性

修复方案 #

1. 调整HTML结构

把主按钮和下拉菜单包裹在同一个容器内，通过容器的hover状态控制下拉菜单的显示/隐藏，避免因鼠标离开主按钮导致下拉消失。

修改后的HTML：

<!DOCTYPE html>
<html>
    <head>
        <link href="styleprueba.css" rel="stylesheet">
    </head>
    <body>
        <!-- 添加容器包裹按钮和下拉菜单 -->
        <div class="dropdown-container">
            <button class="main-menu-button" id="nosotros">Nosotros</button>
            <div class="dropdown-menu" id="dropdown-nosotros">
                <h2 class="dropdown-title">Nosotros</h2>
                <button class="main-menu-second-button">Bienvenidos</button>
                <button class="main-menu-second-button">Misión y Visión</button>
                <button class="main-menu-second-button">Próximamente</button>
                <img src="">
            </div>
        </div>
    </body>
</html>

2. 优化CSS样式

• 给容器设置相对定位，作为下拉菜单的定位基准
• 调整下拉菜单的位置到按钮正下方，确保响应式
• 修复z-index问题，保证下拉菜单可点击
• 用容器的hover状态控制下拉显示，替代原相邻选择器逻辑

修改后的CSS：

/* 容器设置固定定位，保持菜单位置固定 */
.dropdown-container {
    position: fixed;
    top: 7%;
    right: 52%;
    width: 10%;
    /* 相对定位，让下拉菜单以容器为基准 */
    position: relative;
}

.main-menu-button {
    font-family: lorimer-no-2, sans-serif;
    font-weight: 900; /* 修正原font-style: black的错误写法 */
    font-size: 13px;
    background-color: transparent;
    color: white;
    border: transparent;
    width: 100%; /* 按钮宽度占满容器，保持响应式 */
    padding: 8px 0;
    background-color: blue;
}

.dropdown-menu {
    background-color: whitesmoke;
    color: blue;
    position: absolute;
    top: 100%; /* 定位到按钮正下方 */
    left: 0;
    width: 100%; /* 宽度和按钮一致，响应式 */
    display: none; /* 默认隐藏 */
    z-index: 100; /* 确保在最上层，可点击 */
    padding: 10px 0;
}

.main-menu-second-button {
    background-color: transparent;
    color: black;
    border-color: transparent;
    width: 100%;
    padding: 8px 10px;
    text-align: left;
}

.main-menu-second-button:hover {
    color: aquamarine;
}

/* 悬停容器时显示下拉菜单 */
.dropdown-container:hover .dropdown-menu {
    display: block;
}

关键修改说明

• 容器包裹：通过dropdown-container将按钮和下拉菜单绑定，悬停容器内任意区域都会保持下拉菜单显示，解决了鼠标离开按钮就消失的问题。
• 定位调整：下拉菜单设置top:100%和left:0，基于容器的相对定位，精准落在按钮正下方；宽度设为100%，和按钮同步，保证响应式。
• z-index修复：去掉原z-index:-1，改为z-index:100，避免下拉菜单被按钮遮挡，确保可点击。
• 响应式优化：按钮和下拉菜单宽度都设为100%，跟随容器宽度变化，适配不同屏幕尺寸。

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