如何创建 CSS 下拉菜单而不是下拉菜单？

Barbara Streisand

发布： 2024-12-11 01:06:09

原创

670 人浏览过

How Can I Create a CSS Drop-Up Menu Instead of a Drop-Down Menu?

使用纯 CSS 的下拉菜单

本文讨论了如何自定义使用纯 CSS 创建的下拉菜单，使其成为“下拉”菜单而不是“下拉”菜单。菜单栏位于布局的底部，问题是如何让它向上打开。

解决方案

创建一个下拉菜单， CSS 规则需要调整。

演示1:

添加底部：100%；现有 CSS 规则：

#menu:hover ul li:hover ul {
    bottom: 100%; /* added this attribute */
}

登录后复制

演示 2：

要防止子菜单受到下拉行为的影响，请使用以下规则：

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

登录后复制

演示3:

恢复下拉菜单周围的边框：

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

登录后复制

这里是一个 JSFiddle 演示：http://jsfiddle.net/W5FWW/4/

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

来源：php.cn

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章