title: Centered Menu Dropdowns in Purecss Framework
body: <p>This is my current menu copied from <a href="https://purecss.io/menus/" rel="nofollow noreferrer">Purecss documentation</a> which <a href="https://jsfiddle.net/tnb07uj5/" rel="nofollow noreferrer">works fine</a>:</p>
  
  <pre><code>&lt;div class="pure-menu pure-menu-horizontal"&gt;
  &lt;ul class="pure-menu-list"&gt;
      &lt;li class="pure-menu-item pure-menu-selected"&gt;&lt;a href="#" class="pure-menu-link"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover"&gt;
          &lt;a href="#" id="menuLink1" class="pure-menu-link"&gt;Contact&lt;/a&gt;
          &lt;ul class="pure-menu-children"&gt;
              &lt;li class="pure-menu-item"&gt;&lt;a href="#" class="pure-menu-link"&gt;Email&lt;/a&gt;&lt;/li&gt;
              &lt;li class="pure-menu-item"&gt;&lt;a href="#" class="pure-menu-link"&gt;Twitter&lt;/a&gt;&lt;/li&gt;
              &lt;li class="pure-menu-item"&gt;&lt;a href="#" class="pure-menu-link"&gt;Tumblr Blog&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>What I'm trying now is to center the dropdown / submenu items under the parent menu (In this case <code>Contact</code>). I'm looking for a solution which works no matter of the parent menu length. Please note that I'm refering to the position of <code>pure-menu-children</code> class under the parent and not <code>text-align</code> of submenu items. I've already tried this with no luck:</p>
  
  <pre><code>.pure-menu-horizontal ul.pure-menu-children {
    left: -50%;
  }
  </code></pre>
  
  <p>Hopefully it's clear and thanks in advance for the help.</p>