导航栏Y轴滚动优化与二级链接悬停对齐需求

我创建了一个导航栏的CodePen示例，基础HTML结构如下：

<nav>
<ul>
    <li>
        <div class="main-link-container">
            <a href='#' class="main-link">Link 1</a>
            <div class="secondary-links">
            </div>
        </div>
    </li>
    <!-- 更多主链接项 -->
 </ul>
</nav>

需要实现以下三个功能：

• 导航栏Y轴溢出时可滚动
• 主链接悬停时始终显示secondary-links容器
• 最后一个主链接的secondary-links容器底部与该主链接底部对齐（当前悬停最后一个主链接时，部分二级链接无法完整显示）

解决方案 #

1. 实现导航栏垂直滚动 #

给<nav>元素添加CSS样式，限制高度并启用垂直溢出滚动：

nav {
  max-height: 400px; /* 可根据实际布局调整高度值 */
  overflow-y: auto;
}

当导航内容总高度超过设置的max-height时，会自动出现垂直滚动条，确保所有内容都能被访问。

2. 悬停主链接时显示二级链接 #

通过CSS伪类控制二级链接容器的显示状态：

/* 假设secondary-links默认是隐藏状态（如display: none） */
.main-link-container:hover .secondary-links {
  display: block;
}

如果使用opacity或visibility控制隐藏，只需对应修改属性值即可，确保主链接容器被悬停时，二级链接始终可见。

3. 最后一个主链接的二级链接底部对齐 #

通过定位调整最后一个二级链接容器的位置，让它从主链接底部向上展开：

.main-link-container {
  position: relative; /* 作为二级链接的定位基准 */
}

/* 针对最后一个主链接的二级容器 */
nav ul li:last-child .secondary-links {
  top: auto; /* 覆盖默认的top定位 */
  bottom: 100%; /* 以主链接底部为基准向上排列 */
}

这样设置后，最后一个二级链接容器会向上延伸，避免超出导航栏底部导致内容被截断，实现底部对齐的效果。

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