电商网站下拉菜单故障：无法展开，显示为普通菜单

问题说明 #

开发电商网站的游戏类型下拉菜单时，菜单元素始终显示在主菜单下方，无法实现hover展开的交互效果，仅呈现普通菜单样式。

修复步骤 #

1. 修正HTML结构 #

当前子菜单<div class="sub-menu-1">未嵌套在Games对应的<li>标签内部，导致hover触发逻辑失效。需将子菜单移入Games的<li>中：

<nav>
    <ul id="MenuItems">
        <li><a href="#">Home</a></li>
        <li>
            <a href="#">Games</a>
            <div class="sub-menu-1">
                <ul>
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Shooting</a></li>
                    <li><a href="#">Survival</a></li>
                    <li><a href="#">Indie</a></li>
                </ul>
            </div>
        </li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">Account</a></li>
    </ul>
</nav>

2. 调整CSS样式 #

默认隐藏子菜单，仅在hover父级<li>时触发显示，并修正定位与布局：

/*----------SUB-MENU--------*/
nav ul li{
    position: relative; /* 让子菜单基于父li定位 */
}
nav ul li:hover{
    background: #000;
    border-radius: 3px;
}
/* 默认隐藏子菜单 */
.sub-menu-1{
    display: none;
    position: absolute;
    background-color: var(--color-black);
    top: 100%; /* 子菜单贴在父li底部 */
    left: 0;
    z-index: 100; /* 避免被其他元素覆盖 */
}
/* hover父li时显示子菜单 */
nav ul li:hover .sub-menu-1{
    display: block;
}
.sub-menu-1 ul{
    display: block; /* 让子项垂直排列 */
    margin: 10px;
    padding: 0;
}
.sub-menu-1 ul li{
    width: 150px;
    padding: 8px 12px;
    list-style: none;
}

3. 可选优化 #

添加过渡动画让展开效果更平滑：

.sub-menu-1{
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
nav ul li:hover .sub-menu-1{
    opacity: 1;
    visibility: visible;
}

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