Как отобразить пункты меню в виде блока - PullRequest
Новая
       33

Как отобразить пункты меню в виде блока

0 голосов
/ 09 мая 2018

У меня есть меню, которое отображает подпункты в вертикальном списке. Я хотел бы отобразить их по горизонтали, но не вижу, как это сделать. Вот мой jsfiddle . Таким образом, вместо отображения как 

First sub-item
Second sub-item

Это должно быть 

First sub-item  Second sub-item

Ширина списка должна соответствовать доступной, чтобы элементы отображались правильно как в телефоне, так и на рабочем столе. вот код, который я использую. Кто-нибудь, пожалуйста, объясните, как это сделать? 

    <style>
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    ul li {
        display: inline-block;
        width: 10em;
        height: 2em;
        line-height: 2em;
        position: relative;
        border-bottom: 2px solid #ccc;
    }

    ul li:hover {
        background-color: #ffa;
    }

    ul li ul {
        display: none;
        position: absolute;
        top: 2em;
        left: 0;
    }

    ul li:hover ul {
        display: block;
    }

    ul li ul li {
        display: list-item;
        position: relative;
    }

    ul li ul li ul {
        display: none;
        position: absolute;
        top: 0;
        left: 10em;
    }

    ul li ul li ul li {
        display: none;
    }

    ul li ul li:hover ul {
        display: block;
    }

    ul li ul li:hover ul li {
        display: list-item;
    }
    </style>

    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third, with a dropdown
            <ul>
                <li>First sub-item</li>
                <li>Second sub-item</li>
                <li>Third, with a fly-out
                    <ul>
                        <li>Flyout one</li>
                        <li>Flyout two</li>
                        <li>Flyout three</li>
                    </ul>
                </li>
                <li>Fourth sub-item</li>
            </ul>
        </li>
        <li>Fourth list item</li>
    </ul>

1 Ответ

0 голосов
/ 09 мая 2018

Чтобы отобразить их горизонтально, вам нужно просто добавить display:flex при наведении курсора вместо display:block. Надеюсь, что это полезно для вас. 

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul li {
    display: inline-block;
    width: 10em;
    height: 2em;
    line-height: 2em;
    position: relative;
    border-bottom: 2px solid #ccc;
}

ul li:hover {
    background-color: #ffa;
}

ul li ul {
    display: none;
    position: absolute;
    top: 2em;
    left: 0;
}

ul li:hover ul {
    display: flex;
}

ul li ul li {
    display: list-item;
    position: relative;
}

ul li ul li ul {
    display: none;
    position: absolute;
    top: 2em;
    left: 0em;
}

ul li ul li ul li {
    display: none;
}

ul li ul li:hover ul {
    display: flex;
}

ul li ul li:hover ul li {
    display: list-item;
}
<ul>
    <li>Main Menu
        <ul>
            <li>First sub-item</li>
            <li>Second sub-item</li>
            <li>Third sub-item</li>
            <li>Fourth sub-item
                <ul>
                    <li>first flyout</li>
                    <li>second flyout</li>
                    <li>third flyout</li>
                </ul>
            </li>
        </ul>
    </li> 
</ul>
...