Center align dropdown menu in each nav item
<p>I have a <code>div</code> with a specific size, 800px wide and 50px tall, inside I have an unordered list of 6 elements, aligned to center of this <code>div</code>, everything works fine so far. </p>

<p>Then I want to create a dropdown list from each element. Right now I have the second <code>ul</code> aligned to the left side of the container <code>div</code>.</p>

<p>I'm trying to keep it aligned to center of each element, and the <code>ul</code> elements can't be the same width. Here is what I have so far: <a href="https://jsfiddle.net/1tjr1nb5/8/" rel="nofollow">jsFiddle</a>. Any suggestions?</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#bar {
  width: 800px;
  left: 50%;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
  height: 50px;
  background-color: lime;
  position: absolute;
  top: 20px;
}
.test-navbar ul {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  background-color: ;
  text-align: center;
  font-family: sans-serif;
}
.test-navbar li {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 0;
}
.test-navbar a {
  text-align: center;
  padding: 9px;
  margin: 0;
  display: block;
  text-decoration: none;
  color: #313131;
  font-family: 'Oswald', sans-serif;
  margin-top: 0px;
  font-size: 23px;
  background-color: ;
}
.test-navbar a:hover {
  color: #f50057;
}
.test-navbar ul ul {
  display: none;
  position: absolute;
  left: 0%;
  background: #fff;
  margin-left: 0px;
  text-align: center;
  width: 200px;
  line-height: 40px;
  padding: 10px;
}
.test-navbar ul ul li {
  float: none;
  width: 100%;
  background-color: ;
}
.test-navbar ul ul a {
  line-height: 0px;
  padding: 5px 5px;
  width: 100%;
  background-color: ;
}
.test-navbar ul li:hover &gt; ul {
  display: block;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="bar"&gt;
  &lt;div class="test-navbar"&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;PASION&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href=""&gt;EXTRA FROM PASION1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;EXTRA FROM PASION2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;EXTRA FROM PASION3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;EXTRA FROM PASION4&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;EXTRA FROM PASION5&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;EXTRA FROM PASION6&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;EXTRA AREA&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;VIDEO&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;ANOTHER LINK&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href=""&gt;EXTRA FROM PASION1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;EXTRA FROM PASION2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;EXTRA FROM PASION3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;EXTRA FROM PASION4&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;EXTRA FROM PASION5&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;EXTRA FROM PASION6&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;LINK5 STYLE&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;BYE&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>