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 - ＆gt; http://tinkerbin.com/NlqcJcL7

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

水平子菜单灵活宽度

1 个答案: