CSS导航菜单鼠标移出菜单栏时消失问题求助

问题描述 #

菜单栏鼠标悬停时可显示下拉菜单，但鼠标移至下拉菜单区域时，下拉菜单立即消失。使用PHP从MySQL动态获取菜单项，搭配精简版Tailwind CSS。

原因分析 #

• .dropdown设置了overflow: hidden，会裁剪下拉菜单，导致鼠标无法正确识别悬停区域
• .dropdown-content未设置top值，菜单与父导航项之间存在空隙，鼠标移动时会触发父元素的hover离开状态
• 同时设置display: none和visibility: hidden，导致显示逻辑冲突
• 存在冗余的hover触发规则（.topnav a:hover .dropdown-content和.dropdown:hover .dropdown-content），引发逻辑混乱

修复方案 #

针对桌面端（min-width:769px）的CSS样式进行以下调整：

@media screen and (min-width: 769px) {
    .topnav .icon {
        display: none;
    }

    /* 移除冗余的a:hover触发规则 */
    /* .topnav a:hover .dropdown-content {
        display: block;
    } */

    .dropdown {
        float: left;
        /* 移除overflow:hidden，避免裁剪下拉菜单 */
        /* overflow: hidden; */
        position: relative;
        display: inline-block;
    }

    .dropdown a {
        display: block;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        margin: 0;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 999; /* 提高层级，避免被其他元素遮挡 */
        top: 100%; /* 紧贴父元素底部，消除间隙 */
        left: 0; /* 对齐父元素左侧 */
    }

    /* 移除冗余的visibility和opacity设置，统一用display控制 */
    /* .dropdown .dropdown-content {
        visibility: hidden;
        opacity: 0;
    } */

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-content a:hover {
        background-color: #ddd;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }
}

额外优化建议 #

若想添加过渡动画提升体验，可修改为以下写法（替换原有的display控制逻辑）：

.dropdown-content {
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 999;
    top: 100%;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.dropdown:hover .dropdown-content {
    opacity: 1;
    visibility: visible;
}

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