-1

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.

Ehsan
  • 1,022
  • 11
  • 20
  • what's 2 downvotes for without any comments? I thought the question might be helpful for those using Purecss too. Also I've already checked Stack Overflow for the answer with no luck. – Ehsan Jan 20 '19 at 01:06

1 Answers1

0

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.

Ehsan
  • 1,022
  • 11
  • 20