CSS多列下拉菜单不适用

Question

我有一个水平悬停下拉菜单几乎完美无缺。目标是如果我将鼠标悬停在链接上，我将看到一行子链接。每行有一定数量的子链接，应显示在一列中。但是，目前，子链接显示在一行中，而不是在其子链接下的列中。

HTML：

<div class="menu">
    <ul>
<li><a href='#'>Link 1</a>
    <ul>
    <li><a href='#'>Sub Link 1</a></li>
        <ul>
        <li><a href='#'>Sub Child Link 1</a></li>
        <li><a href='#'>Sub Child Link 2</a></li>
        <li><a href='#'>Sub Child Link 3</a></li>
        </ul>
    <li><a href='#'>Sub Link 2</a></li>
    </ul>
</li>
<li><a href='#'>Link 2</a>
    <ul>
    <li><a href='#'>Sub Link 1</a></li>
    <li><a href='#'>Sub Link 2</a></li>
    <li><a href='#'>Sub Link 3</a></li>
    <li><a href='#'>Sub Link 4</a></li>
    </ul>
</li>
<li><a href='#'>Link 3</a>
    <ul>
    <li><a href='#'>Sub Link 1</a></li>
    <li><a href='#'>Sub Link 2</a></li>
    <li><a href='#'>Sub Link 3</a></li>
    <li><a href='#'>Sub Link 4</a></li>
    </ul>
</li>
</ul>

CSS：

.menu{
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    border-bottom: 1px solid #ccc;
}
.menu ul{
    background:#fff;
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
}
.menu li{
    float:left;
    padding:0px;
}
.menu li a{
    background:#fff;
    color:#000;
    display:block;
    line-height:35px;
    margin:0px;
    padding:0px 25px;
    text-align:center;
    text-decoration:none;
    text-transform: uppercase;
}

.menu li a:hover {
        border-bottom: 1px solid #ff0000;
}

.menu li a:hover, .menu ul li:hover a{
    background: #fff;
    text-decoration:none;
}
.menu li ul{
    background:#fff;
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    border:0px;
    position:absolute;
    width:400px;
    z-index:200;
}
.menu li:hover ul{
    display:block;
}
.menu li li {
    background: #fff;
    display:block;
    float:left;
    margin:0px;
    padding:10px;
    width:100px;
}
.menu li:hover li a{
    background:none;
}
.menu li ul a{
    display:block;
    height:30px;
    font-size:12px;
    font-style:normal;
    color: #999;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
    text-transform: uppercase;
}
.menu li ul a:hover, .menu li ul li:hover a{
    background:#fff;
    border:0px;
    text-decoration:none;
}
.menu p{
    clear:left;
}

Answer 1

好的，所以你的问题的答案有几个部分。所有这些都在this fiddle中提供。到此为止。

标记

首先，如果子菜单嵌套在链接的父级li中，则更容易处理。另外（旁注）如果你的css因任何原因失败，这将保留父子关系。新的基本结构如下所示：

<div class="menu">
    <ul>
        <li>
            <a href='#'>Link</a>
            <ul>
                <li>
                    <a href='#'>Child</a>
                    <ul>
                        <li><a href='#'>Grandchild</a></li>
                    </ul>
                </li>
            </ul>
        <li>
    </ul>
</div>

样式

在the fiddle中，我将样式分成几个部分，我将逐一介绍。

重置

这很简单。它只是重置一切。但是，这与解决方案无关，所以我已经将其排除在答案之外。如果你需要它，那就是小提琴。

风味

在小提琴中，味道只是我个人的口味。它主要是颜色，但有一个重点。我们将填充应用于a元素。这将有助于事情正确排列，并且还将提供一个很好的可点击区域作为副作用。

.menu a {
    display: block;
    padding: 10px; /* padding on the a */
    color: #000;
}

定位

这是答案的真正核心。我们正在做的是你已经完成的事情，除了我们在第三级li取消浮动。简单的答案就是那条线，说实话。

.menu li {
    position: relative;
    float: left;
}
.menu li ul { position: absolute; width: 400px; }
.menu li li ul { width: 120px; }
.menu li li li { float: none; } /* this lets columns happen again */

悬停

为了以更简单的方式完成隐藏，我们将使用子选择器（>）。如果你从来没有使用它，克里斯科伊尔explains it very well，但基本上它只是直接的孩子。这样我们就可以说只有在ul被悬停时才会显示直接嵌套在li下的任何li。我们这样做：

.menu li > ul { display: none; }
.menu li:hover > ul { display: block; }

编辑：MDN在子选择器上也有一个很棒的条目。请查看here。

演示

同样，整件事在http://jsfiddle.net/4tPcL/的小提琴中得到了证明。希望这有帮助！