容器设置为“隐藏溢出”时，是否可以看到超出容器维度的内容？

Question

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> 

这是一个“滑”菜单 - 菜单 - 视DIV需要有溢出隐藏而ul.level-1，你看到有一个值从JavaScript计算（这是用箭头滚动的项目的长列表）

问题是，由于溢出：隐藏，“下拉”内的内容不显示，即使它设置为位置：绝对。

你看到解决这个问题的方法吗？

Answer 1

只有隐藏在左侧和右侧

.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>