如何仅使用 CSS 创建向上打开的下拉菜单？-css教程-PHP中文网

如何仅使用 CSS 创建向上打开的下拉菜单？

Susan Sarandon

发布： 2024-12-10 08:43:17

原创

939 人浏览过

How Can I Create an Upward-Opening Dropdown Menu Using Only CSS?

使用纯CSS向上打开的下拉菜单

仅使用以下方法将下拉菜单转换为向上打开的“下拉”菜单的挑战CSS 需要对其样式进行轻微修改。下面建议的CSS将实现这种效果：

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

登录后复制

通过添加bottom: 100%;根据上述规则，子菜单将位于其父菜单项的底部，并在悬停时显示为“下降”。

为了获得更精致的效果，您可以可以通过添加以下内容来消除子菜单之间的重叠：

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

登录后复制

这可确保仅打开悬停菜单项的子菜单

想要体验下拉效果，可以参考以下demo：http://jsfiddle.net/W5FWW/4/。

如果原来的菜单有边框，可以通过以下方式恢复添加：

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

登录后复制

这将保留边框，同时保留下拉功能。

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