Question

我正在使用bootstrap 2.我的下拉列表包含填充下拉列表的各种元素。我将overflow设置为hidden，以保留边框半径。当position设置为absolute时，伪前/后箭头消失。当位置是静态时它们仍然可见，但我必须使用绝对位置。

HTML：

<div class="dropdown">
    <ul class="dropdown-menu">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

CSS：

.dropdown {
    position: relative;
}

.dropdown-menu {
    position: static;
    display: block;
    overflow: hidden;
    float: left;
    min-width: 0;
    padding: 5px 0;
    margin: 0;
    list-style: none;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
}

li {
    padding: 4px 10px;    
}

.dropdown-menu:before {
  content: '';
  display: inline-block;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: -7px;
  left: 16px;
}

.dropdown-menu:after {
  content: '';
  display: inline-block;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  position: absolute;
  top: -5px;
  left: 17px;
}

这是一个小提琴：http://jsfiddle.net/rdellara/4epZV/

改变位置：静态;绝对的.dropdown看例子。

Answer 1

这是因为你overflow:hidden设置了.dropdown-menu，因此，如果你绝对将伪元素放在元素之外，它们就不会出现。

jsFiddle example - overflow:hidden已删除 - 现在可以使用了。

至于为什么overflow:hidden在职位static时不起作用，这本身就是另一个问题，除了以外我找不到任何相关的规范：

CSS定位布局模块级别3 - 6.7。静态

盒子是普通盒子，按照正常流程布置。

我猜这是因为元素没有定位，所以不会有溢出。

Answer 2

由于您在实际元素之外的:before和:after伪元素通过负边距顶部，overflow: hidden隐藏了它们。

删除它并更改为position: absolute并且您很好。

http://jsfiddle.net/4epZV/2/

具有位置静态但不是绝对位置的显示后/前的伪类

2 个答案: