Центрированные выпадающие меню в Purecss Framework - PullRequest
Новая
       48

Центрированные выпадающие меню в Purecss Framework

0 голосов
/ 19 января 2019

Это мое текущее меню, скопированное из документации Purecss , которая отлично работает : 

<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>

Сейчас я пытаюсь центрировать выпадающие / подменю пунктов в родительском меню (в данном случае Contact). Я ищу решение, которое работает независимо от длины родительского меню. Обратите внимание, что я ссылаюсь на позицию класса pure-menu-children под родителем, а не на text-align пунктов подменю. Я уже попробовал это без удачи: 

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

Надеюсь, это понятно и заранее спасибо за помощь.

1 Ответ

0 голосов
/ 20 января 2019

Я нашел способ добиться того, чего хотел, проверив в этом примере . Для подменю необходимо было указать ширину: 

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

Вы можете увидеть это в действии здесь .

...