So basically I have a vertical list of "UL". This is a drop-down list from a div that is turned on when clicked, how can I draw one of these facebook / twitter triangles above it?
HTML:
<div id="set"> <ul class="dropdown"> <li>Privacy</li> <li>Info</li> <li>Logout</li> </ul> </div>
CSS
.dropdown { position: absolute; top: 45px; left: 5%; list-style-type: none; background: white; border: 1px solid black; border-radius: 10px; margin: 0; padding: 0; } .dropdown:before{ width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid black; } .dropdown li{ height: 40px; width: 150px; padding-left: 15px; border-bottom: 1px solid black; font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; font-size: 14px; } .dropdown li:last-child{ border-bottom: none; }
Should I try to use the relative position in the triangle or? .. any ideas?
source share