如何將菜單子項顯示為塊

Question

我有一個菜單，可在垂直列表中顯示子項目。 我想水平顯示它們，但看不到該怎么做。 這是我的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>

Answer 1

要水平顯示它們，您只需要在懸停時添加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>