html - 将css箭头添加到绝对位置的ul

Question

我正在尝试在我的 中添加一个箭头ul，问题是ul我position: absolute;总是position: relative;在ul. 有人有想法吗？

编辑：忘了提，箭​​头在上面。像这样

Jsfiddle：演示

<div id="con">
    <ul id="links">
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link3</a></li>
    </ul>
</div>​


#con {
    margin: 20px;
    padding: 20px;
    width: 300px;
    height: 200px;
    position: relative;
}

#con #links {
    position: absolute;
    background-color: aqua;   
}

#con #links li {
    padding: 10px;
}

​</p>

Answer 1

尝试这个

CSS

 #con #links:before{
    content:'';
    width:0px; height:0px;
    position:absolute;left:50%; top:-20px; 
    margin-left:-10px;
    border:10px solid;
    border-color: transparent transparent rgba(0,0,4,0.8) transparent;
}

演示 ​</p>