Question

我发现这个SO讨论（Dropdown Menu - Make the <ul> submenu 100% width）非常接近我正在寻找的东西，但子菜单项是堆叠的。我希望子菜单项内联，而不是堆叠。我在子菜单上尝试了浮动，内联块，但没有任何东西可以内联。

Answer 1

在该示例中，子菜单项的最大宽度受容器宽度的限制。你可以让它们保持内联如下：

.nav > ul > li > ul {
    ...
    white-space: nowrap;
}
.nav > ul > li > ul > li {
    ...
    display: inline-block;
}

<强> Updated jsFiddle

＆＃13;

/* not very relevant styling */
h1         { font-size: 20px; padding-top: 20px; }
.container { position: relative; margin: 20px auto 0 auto; width: 75%; }
.header    { background: #eee; }
.nav       { background: #ccc; }


/* relevant styling */

body { overflow-x: hidden; } /* trick from css-tricks comments */

/* FIRST LEVEL */

.nav > ul > li { 
    display: inline-block; 
    position: relative; 
    padding: 3px 10px 3px 0;
    z-index: 100;
}

/* SECOND LEVEL */

.nav > ul > li > ul {
    position: absolute;
    left: 0;
    top: 100%;
    padding: 0 1000em; /* trick from css-tricks comments */
    margin: 0 -1000em; /* trick from css-tricks comments */
    z-index: 101;
    visibility: hidden;
    opacity: 0;
    background: rgba(255, 240, 240, 0.8);
    white-space: nowrap; /*new*/
}

.nav > ul > li:hover > ul {
    visibility: visible;
    opacity: 1;
}

.nav > ul > li > ul > li {
    padding: 3px 0;
    display: inline-block; /*new*/
}

＆＃13;

<div class="header">
    
    <div class="container">
        <h1>Hank's Big Leauge Widgets</h1>
        <span>You want a widget? we got 'em!</span>
    </div>
    
    <!-- NAVIGATION -->    
    <div class="nav">
        <ul class="container">
            <li>
                <a href="#">Products</a>
                <ul>
                    <li><a href="#">Widget A</a></li>
                    <li><a href="#">Widget B</a></li>
                    <li><a href="#">Widget C</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Locations</a>
                <ul>
                    <li><a href="#">Location A</a></li>
                    <li><a href="#">Location B</a></li>
                    <li><a href="#">Location C</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Staff</a>
                <ul>
                    <li><a href="#">President</a></li>
                    <li><a href="#">VP</a></li>
                    <li><a href="#">Manager</a></li>
                </ul>
            </li>
        </ul>
    </div>
    
</div>

<div class="content container">
    <p>All sorts of content</p>
    <p>All sorts of content</p>
    <p>All sorts of content</p>
    <p>All sorts of content</p>
    <p>All sorts of content</p>
    <p>All sorts of content</p>
</div>

＆＃13;

Answer 2

两种方法：

Flexbox - 子菜单ul应具有以下CSS：

ul { 显示：flex; 弯曲方向：行; 辩解内容：空间 - 间隔; }

More info on flexbox on CSS Tricks

内联 - 子菜单li的{{1}}个孩子应该ul

根据您提供的链接中的解决方案的性质，两种方式都需要子菜单具有固定的宽度。

下拉菜单<ul> 100％宽度，内联子菜单项

2 个答案: