如何将 CSS 下拉菜单转换为下拉菜单？

垂直下拉菜单的 drop-up 子菜单：用纯 CSS 实现

对于 drop-down 菜单来说，变身为 drop-up 菜单很常见，尤其是当菜单栏位于布局底部时。要实现这一点，我们需要对 CSS 样式进行一些修改。

问题：将 drop-down 菜单转换为 drop-up 菜单

对于给定的 drop-down 菜单 CSS，如何修改样式以使其变成 drop-up 菜单？

解决方案：调整 #menu:hover ul li:hover ul 规则

可以通过添加 bottom: 100%; 属性到 #menu:hover ul li:hover ul 规则来实现 drop-up 功能。

#menu:hover ul li:hover ul {
    position: absolute;
    margin-top: 1px;
    font: 10px;
    bottom: 100%;
}

可选改进：仅对顶层子菜单应用 drop-up

为了防止子菜单也采用 drop-up 效果，可以添加以下规则：

#menu>ul>li:hover>ul {
    bottom: 100%;
}

其他考虑因素：恢复边框

添加 bottom: 100%; 属性可能会去除子菜单的边框。要恢复边框，可以添加以下属性：

#menu>ul>li:hover>ul {
    bottom: 100%;
    border-bottom: 1px solid transparent
}

演示

以下是一些演示此技术的示例：

• [Demo 1](https://jsfiddle.net/W5FWW/4/)
• [Demo 2](https://jsfiddle.net/zyp6c/)
• [Demo 3](https://jsfiddle.net/phkj20zo/)

以上是如何将 CSS 下拉菜单转换为下拉菜单？的详细内容。更多信息请关注PHP中文网其他相关文章！