水平子菜单灵活宽度

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

这是一个解决方案的修补程序 -> http://tinkerbin.com/NlqcJcL7

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