title: navigation bar arrow not showing under each tab CSS
body: <p>I want to use css to get an arrow that points down from each tab of the navigation bar. This is what I have so far.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul {
     background: rgba(0,0,0,0.3);
     list-style-type: none;
     padding: 0;
     overflow: hidden;
     margin: 0;
  }
  
  li {
     float: left;
  }
  
  li a {
     display: block;
     color: white;
     text-align: center;
     padding: 16px 16px;
     text-decoration: none;
     -webkit-transition:color 0.5s ease-in;
  }
  
  li a:visited {
     color: white;
  }
  
  li a:hover {
     color: #df9fa2;
  }
  
  #menu a:hover:after {
     content: "";
     position: absolute;
     top: 52px;
     width: 0px;
     left: 50%;
     margin-left: -15px;
     border-left: 15px solid transparent;
     border-right: 15px solid transparent;
     border-top: 15px solid rgba(0,0,0,0.3);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="nav"&gt;      
      &lt;ul id="menu"&gt;
          &lt;li&gt;&lt;a class="link" href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="link" href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="link" href="#skills"&gt;Skills&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="link" href="#portfolio"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
          &lt;li style="float:right"&gt;&lt;a class="link" href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The arrow is always showing up in the middle of the navigation bar. This is because of the <code>left: 50%</code> code. I think it's doing this because it's getting 50% from the wrong element but I don't know how to fix it. Any help would be great.</p>