Centered Menu Dropdowns in Purecss Framework

Question

This is my current menu copied from Purecss documentation which works fine:

<div class="pure-menu pure-menu-horizontal">
<ul class="pure-menu-list">
    <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li>
    <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
        <a href="#" id="menuLink1" class="pure-menu-link">Contact</a>
        <ul class="pure-menu-children">
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Email</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Tumblr Blog</a></li>
        </ul>
    </li>
</ul>

What I'm trying now is to center the dropdown / submenu items under the parent menu (In this case Contact). 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 pure-menu-children class under the parent and not text-align of submenu items. I've already tried this with no luck:

.pure-menu-horizontal ul.pure-menu-children {
  left: -50%;
}

Hopefully it's clear and thanks in advance for the help.

Answer 1

I found a way to achieve what I wanted after checking this example. A width was needed to be set for the submenu:

.pure-menu-horizontal ul.pure-menu-children {
  left: 50%;
  margin-left: -90px;
  width: 180px;
}

You can see it in action here.