Question

我在这里创建了一个简单的JsFiddle：http://jsfiddle.net/3ue0mfcp/9/ - 我不能让下拉菜单保持在其父容器之外，同时当列表元素比父容器宽时，拉伸变宽。

我尝试过使用

overflow: visible

但没有希望，我做错了什么？

Answer 1

删除位置：绝对; 不需要。此外，你不需要所有那些溢出：可见;你也可以删除所有这些。

.tooltip-popup > ul {
    ....
    position: absolute;
    ....
 }

Answer 2

在容器元素

上声明固定宽度

前言：当您使用position: absolute时，您需要声明位置坐标和/或宽度。

如果您没有声明坐标（top，right，bottom和/或left），浏览器会自动将它们设置为自动，可能导致不可预测和不一致的行为（取决于浏览器）。

如果您没有声明宽度 - 在Chrome 39（我刚刚使用的版本） - 绝对定位元素的宽度将随其内容扩展，直到其边缘到达最近的定位祖先＆＃39 ; s边缘，此时它停止扩展。

当没有声明坐标和/或宽度时，每个浏览器可以使用不同的逻辑。

因此，如果您希望它比最近的定位祖先宽，则必须在绝对定位的元素上声明宽度。

解决方案：但是如果你想要变宽子元素，你可以通过将子元素包装在固定宽度的父元素中来实现它，这会产生最大宽度的效果。

警告：如果光标位于固定宽度父级的任何部分上，将继续显示可变宽度子级。换句话说，如果光标位于父级而不是子级上，则子级仍然可见。

以下是此方法的演示：

＆＃13;

.button {
    position: relative;
    display: inline-block;
    padding: 10px 15px;
    cursor: default;
    font: normal 1em/1em sans-serif;
    color: #fff;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 3px;
    background-color: #2f7bbd;
}
.dropdown {
    position: absolute;
    top: 37px;
    left: 0;
    width: 300px; /* max-width of children */
}
.dropdown ul {
    display: none;
    margin: 0;
    padding: 0;
    border: 1px solid #ccc;
    border-bottom: none;
    background-color: #fff;
}
.dropdown ul li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #ccc;
}
.dropdown ul li a {
    display: block;
    padding: .5em;
}
.button:hover .dropdown ul {
    display: inline-block;
}

＆＃13;

<span class="button">Test
  <span class="dropdown">
     <ul>
       <li><a href="#">button test test test test</a></li>
       <li><a href="#">button</a></li>
       <li><a href="#">button</a></li>
    </ul>
  </span>
</span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

＆＃13;

下拉菜单在延伸到其容器长度时被裁剪

2 个答案:

在容器元素