Question

I’m trying to add a arrow to my ul, issue is that the ul got position: absolute;, i always use position: relative; on the ul. Anybody got ideas?

EDIT: forgot to mention, arrow on top. like 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

Try this

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 ​