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

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

nav div .main-ul li{
    display: inline-block;
}

.sub-ul li{
    display: block;
    position: absolute;
}

<div>

    <ul class = "main-ul">

        <li>Item 1

            <ul class = "sub-ul">

                <li>Sub Menu Item</li>
                <li>Sub Menu Item</li>
                <li>Sub Menu Item</li>
                <li>Sub Menu Item</li>

            </ul>

        </li>
        <li>Item 1</li>
        <li>Item 1</li>
        <li>Item 1</li>

    </ul>

</div>

Просто сложите элемент подменю с помощью css.

css

08.04.2019 19:40

Приемы 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 сценарий полностью изменился.

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

Ответы 1

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

Пожалуйста, попробуйте это.

<div>
    <ul class = "main-ul">
        <li>Item 1
            <ul class = "sub-ul">
                <li>Sub Menu Item</li>
                <li>Sub Menu Item</li>
                <li>Sub Menu Item</li>
                <li>Sub Menu Item</li>
            </ul>
        </li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</div>

CSS

div .main-ul li {
    display: inline-block;
    position: relative;
    border: 1px solid red;
}
div .main-ul li > .sub-ul {
    display: none;
    position: absolute;
    top: 20px;
    left: -1px;
    padding: 0;
}
div .main-ul li:hover > .sub-ul {
    display: block;
}
div .main-ul li > .sub-ul > li {
    white-space: nowrap;
}

JsFiddle

Большое спасибо, я наконец понял концепцию, стоящую за этим.

— 08.04.2019 22:26

08.04.2019 20:06