添加CSS箭頭的UL這就是位置絕對

Question

我想一個箭頭添加到我的ul，問題是，ul得到了position: absolute;，我總是在ul使用position: relative;。任何人都有想法？

編輯：忘了提及，頂部的箭頭。像this

的jsfiddle：DEMO

<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; 
} 

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; 
} 

DEMO