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

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

<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%;
}

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

за что 2 минуса без комментариев? Я подумал, что этот вопрос может быть полезен и для тех, кто использует Purecss. Также я уже проверил переполнение стека для ответа без везения.

— 20.01.2019 02:06

css drop-down-menu menu submenu pure-css

19.01.2019 12:11

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

113

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

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

20.01.2019 02:58

Другие вопросы по теме

Не показывать путь к элементам подменю в хлебных крошках

StaticInjectorError — заполнение выпадающих списков

Закрыть выпадающее меню при прокрутке

Используйте параметр URL для предварительного выбора параметра по метке, а не по значению

Bootstrap 4 - H3 внутри раскрывающейся ссылки

Как сделать так, чтобы раскрывающийся список начальной загрузки не менял ширину с другим текстом или не влиял на другие элементы?

Заполнить раскрывающееся меню HTML из столбца в электронной таблице Google

React native select: ключ доступа / индекс выбранной опции

Не удается получить данные формы в функции просмотра: Django

Я не могу сделать чистое выпадающее меню

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

Ответы 1

Другие вопросы по теме

Похожие вопросы