title: CSS: Placing an arrow / triangle with border on the top of my drop down menu
body: <p>Just launched this website (<a href="http://dovidoved.org/" rel="noreferrer">http://dovidoved.org/</a>) and the client wants one of those triangles / arrows on the top of each drop down menu. Problem is the menu has a border around it and the arrow should mesh with both the background as well as the border. Not sure how to do that. Any suggestions? Must I have to use an image? Here's my CSS:</p>
  
  <pre><code> /* creates triangle */
   .main-navigation ul ul:before {
       border-bottom: 10px solid #fae0bb;
       border-left: 10px solid transparent;
       border-right: 10px solid transparent;
       content: "";
       height: 0;
       position: absolute;
       right: 0;
       top: -10px;
       width: 0;
   }
  
   .main-navigation ul ul {
       background: #fae0bb;
       border: 8px solid #fffefe;
       box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
       float: left;
       position: absolute;
       margin: 0;
       top: 2.8em;
       left: -999em;
       width: 200px;
       z-index: 99999;
  }
  </code></pre>