CSS Dropdown menu isn't shown even though absolutely positioned because of overflow: hidden
我正在构建一个大型下拉菜单。
HTML 看起来有点像这样:
<div class="menu-viewport">
<ul class="menu level-1" style="width: 2609px;">
<li class="menu-item has-children first menuslider-slide">
<a href="/ddd">DDD</a>
<div class="dropdown">
<p>rfpogjfgfdggffdd'j</p>
<p>rfdsfgfgfgd'j</p>
</div>
</li>
<li class="menu-item has-children menuslider-slide">
<a href="/sex">sex</a>
</li>
<li class="menu-item menuslider-slide">
<a href="/fff-3">FFF</a>
</li>
<li class="menu-item menuslider-slide">
<a href="/fff-4">FFF</a>
</li>
<li class="menu-item menuslider-slide">
<a href="/fff-5">FFF</a>
</li>
<li class="menu-item menuslider-slide">
<a href="/www">WWW</a>
</li>
</ul>
</div>
这是一个“滑动”菜单 - menu-viewport div 需要 overflow hidden ,而你看到的 ul.level-1 有一个从 JavaScript 计算的值(它是一长串用箭头滚动的元素)
问题是因为overflow: hidden,“dropdown”里面的内容没有显示,即使它被设置为position:absolute。
你有什么办法解决这个问题吗?
最佳答案
只隐藏左右两边的内容
.menu-viewport {
overflow-x:hidden;
}
您的子菜单也应具有以下结构。没有 div 和段落。
<ul>
<li>
<a href="#>item with submenu</a>
<ul>
<li><a href="#>subItem1</a></li>
<li><a href="#>subItem2</a></li>
<li><a href="#>subItem3</a></li>
<li><a href="#>subItem4</a></li>
<ul>
</li>
<li>
<a href="#>item without submenu</a>
</li>
</ul>
关于html - 当容器设置为溢出隐藏时,是否可以看到超出容器尺寸的内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21780209/