Не могу понять почему не получается псевдо-элемент :after спрятать под родительский блок.
html
<ul class="dropdown-menu" aria-labelledby="dropdownTopMenu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">Separated link</a></li>
</ul>
css
.dropdown-menu {
position: absolute;
left: 50px;
top: 50px;
right: initial;
width: 210px;
border: 1px solid #E7E7E7;
border-radius: 3px;
padding: 30px;
z-index: 5;
&:before {
width: 0;
height: 0;
border-style: solid;
border-width: 0 8.5px 10px 8.5px;
border-color: transparent transparent #FFFFFF transparent;
position: absolute;
display: table;
content: ' ';
top: -9px;
left: 50%;
margin-left: -10px;
z-index: 10;
}
&:after {
width: 0;
height: 0;
border-style: solid;
border-width: 0 9.5px 12px 9.5px;
border-color: transparent transparent #E7E7E7 transparent;
position: absolute;
display: table;
content: ' ';
top: -10px;
left: 50%;
margin-left: -11px;
z-index: -1;
}
}
http://jsfiddle.net/To_wave/d9L5h0ws/
Есть какие-нибудь мысли по этому поводу?