解决下拉菜单溢出页面及响应式场景下悬停消失问题

需求背景 #

我正在实现一个响应式下拉菜单，要求：

• 全屏模式下，顶级菜单显示图标+文字
• 窗口宽度在630px-1080px时，顶级菜单仅显示图标，二级子菜单保留完整文字

现有代码 #

HTML代码 #

<li>
    <a href="home.php"><i class="fas fa-home"></i><span class="topbar-text">Home</span></a>

    <label for="btn-1" class="show_nav"><i class="fas fa-sliders"></i><span class="nav_parent topbar-text">Admin</span></label>

    <a><i class="fas fa-sliders"></i><span class="nav_parent topbar-text">Admin</span></a>
    <input type="checkbox" id="btn-1">

    <ul class="navbar_dropdown">
        <li><a href="admin.php"><i class="fas fa-users"></i><span class="subbar-text">Manage users</span></a></li>
        <li><a href="manage.php"><i class="fas fa-list"></i><span class="subbar-text">manage</span></a></li>
        <li><a href="#"><i class="fas fa-users"></i><span class="subbar-text">browse files</span></a></li>
    </ul>
</li>

（注：原代码末尾多余的'需删除，确保标签闭合正确）

响应式CSS代码 #

@media screen and (min-width: 630px) and (max-width: 1080px) {
    .topbar-text {
      display: none;
    }

      .subbar-text {
        font-size: 12px;
    }

    nav ul ul li{
        position: relative;
        margin: 0px;
        left: 0px;
        width: 150px;
        line-height: 0px;

        float: left;

    }
      
  }

当前问题 #

1. 子菜单宽度与溢出矛盾：设置固定width:150px时，文字显示完整，但子菜单会从页面右侧溢出；去掉固定宽度，子菜单过窄，文字折成3行，虽不溢出但显示效果差。
2. 悬停触发异常：响应式场景下，直接将鼠标从顶级菜单移到子菜单时，子菜单会消失，必须走“先移到菜单下方空白区，再左移到子菜单”的L形路径才能正常触发，推测是内边距导致触发区域断开。
3. 希望子菜单既能自适应文字宽度，又能被限制在窗口范围内，必要时向左展开而非向右溢出。

编辑补充：经优化后全屏模式问题改善，但响应式场景下的反向L形悬停问题仍存在（动图显示：鼠标直接从顶级菜单移向子菜单时，子菜单收起，需绕路才能触发）

修复方案 #

1. 解决悬停触发异常问题 #

问题根源是顶级菜单与子菜单之间存在空隙，鼠标移动时脱离触发区域导致菜单收起：

• 调整子菜单定位，使其紧贴顶级菜单底部：给子菜单容器nav ul ul设置top: 100%，消除间隙。
• 修正子菜单项行高：删除line-height: 0px，设置合理行高（如line-height: 30px），保证子菜单项有足够的鼠标触发区域。
• 去掉子菜单项的float: left，让子项垂直排列，避免布局混乱。

2. 解决子菜单宽度与溢出问题 #

• 实现自适应宽度：去掉nav ul ul li的固定width:150px，改用width: auto；给子菜单容器nav ul ul设置width: max-content，让容器自适应文字内容宽度；给.subbar-text添加white-space: nowrap，强制文字不换行。
• 避免右侧溢出：给子菜单容器nav ul ul设置right: 0，当顶级菜单项在页面右侧时，子菜单会向左展开，不会溢出页面。

修改后的响应式CSS代码 #

@media screen and (min-width: 630px) and (max-width: 1080px) {
    .topbar-text {
        display: none;
    }

    .subbar-text {
        font-size: 12px;
        white-space: nowrap; /* 强制文字不换行 */
    }

    nav ul ul {
        position: absolute;
        right: 0; /* 子菜单向右对齐父元素，避免页面右侧溢出 */
        width: max-content; /* 自适应文字内容宽度 */
        top: 100%; /* 紧贴顶级菜单底部，消除触发空隙 */
    }

    nav ul ul li {
        position: relative;
        margin: 0;
        line-height: 30px; /* 恢复正常行高，保证触发区域 */
        float: none; /* 取消浮动，子项垂直排列 */
        width: auto; /* 自适应宽度 */
    }
}

额外注意 #

检查并修正HTML结构，确保标签闭合正确（原代码末尾的多余'需删除），避免因结构错误导致的布局异常。

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