即使绝对定位,由于溢出:隐藏,CSS下拉菜单也不显示 [英] CSS Dropdown menu isn't shown even though absolutely positioned because of overflow: hidden

查看:454
本文介绍了即使绝对定位,由于溢出:隐藏,CSS下拉菜单也不显示的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想在悬停上显示一个下拉菜单,但是我也必须对父元素应用一个溢出:隐藏。结果是我的下拉菜单,即使是绝对定位的,不可见(因为溢出:隐藏)。

I am trying to show a dropdown menu on hover, but I also have to apply an overflow: hidden to the parent element. The result is my dropdown, even though absolutely positioned, isn't visible (because of the overflow: hidden).

我在这里重现了问题: http://plnkr.co/edit/2rbaISwvzuKhyPEFpBKD?p=preview (您可以点击编辑/代码编辑查看完整的源代码)

I reproduced the problem there: http://plnkr.co/edit/2rbaISwvzuKhyPEFpBKD?p=preview (you can hit Edit/Code edit to see the full source code)

(小样本)

#block-paddle-menu-display-first-level .menu_wrapper.level-2 {
  position: absolute;
  visibility: hidden;
}
#block-paddle-menu-display-first-level .has-children:hover .menu_wrapper.level-2 {
  visibility: visible;
  padding: 15px 0;
  background: black;
  width: 300px;
}

在Hover Here -...列表项目下,有一个

Under the "Hover Here -..." list-item, there's a nested ul which should be shown on hover..

要求


  • 为了使箭头/滑动效果可以工作,需要在父项上隐藏的溢出(在测试用例上无效,但忽略现在)

  • 我们需要菜单背景颜色在整个页面上展开

相关问题但不是100%完全相同:可以看到超出容器的内容容器设置为溢出隐藏的维度?

Related Questions but not 100% identical: Is it possible to see content that goes outside a container's dimensions when the container is set to Overflow hidden?

推荐答案

解决方案是将内容中的导航栏移动容器 - 并将溢出:隐藏到DOM中的元素更高 - 这样我们确保高度足够显示下拉列表,同时仍然隐藏溢出横轴的内容...

The solution was to move the navigation bar inside the content container - and move the overflow: hidden to an element higher in the DOM - this way we ensure the height is enough for the dropdown to be shown, while still hiding the content that overflows the horizontal axis...

这篇关于即使绝对定位,由于溢出:隐藏,CSS下拉菜单也不显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆