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

使用纯 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中文网其他相关文章！