css - 水平子菜单灵活宽度

Question

我有一个水平导航，我想要一个水平子导航。问题是我在子导航显示内联时具有绝对位置。我知道当您拥有绝对位置时使用内联显示会出现问题。它可以按照我希望的方式使用固定显示器工作，但我不希望它被固定...有人知道替代方案吗？此外，我不能只在子导航上设置宽度，因为每个子菜单的宽度都不同。

<style>
     ul li {
        float: left;
        position: relative;
    }

    #primary-nav ul li ul {
        position: relative;
        top: 42px;
        display: none;
        width:100%;

    }
    #primary-nav ul li ul li {
        list-style:none outside none;
        margin-left:20px;
        float:left;
        z-index: 1000;
    }
    #primary-nav ul li:hover ul {
        display:inline;
        position:absolute;
    }
</style>


<ul class="menu">
    <li>menu Item</li>
    <li>drop down</li>
        <ul class="submenu">
            <li>dropdown Item</li>
            <li>dropdown Item</li>
        </ul>
 </ul>

Answer 1

这是一个带有解决方案的 tinkerbin -> http://tinkerbin.com/NlqcJcL7

通过将 white-space: nowrap 应用于绝对定位的 .submenu，您可以确保它的子内联 block 不会折叠到下一行。