title: Add top caret (triangle) to UL?
body: <p>So basically I have a vertical 'UL' list. It's a dropdown from a div that is enabled on click, how can I draw one of those facebook/twitter triangles on top of it?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="set"&gt;
                      &lt;ul class="dropdown"&gt;
                          &lt;li&gt;Privacy&lt;/li&gt;
                          &lt;li&gt;Info&lt;/li&gt;
                          &lt;li&gt;Logout&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/E3rpl.png" alt="enter image description here"></p>
  
  <p>Should I try using relative position on the triangle or? .. any ideas?</p>