CSS 多列下拉菜单不正常

Question

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

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 ，我将样式分为几个部分，我将逐一介绍。

重置

这很简单。它只是重置一切。不过，它与解决方案无关，真的，所以我把它排除在答案之外。如果需要，它就在 fiddle 里。

味道

归根结底，味道只是我个人的口味。它主要是颜色，但有一点很重要。我们将填充应用于 a 元素。这将有助于正确排列事物，并且还会提供一个不错的大可点击区域作为副作用。

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

定位

这才是真正的答案核心。我们正在做的就是您已经完成的，只是我们要取消设置第三层 li 上的 float 。老实说，简短的回答就是那一行。

.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 */

悬停

为了以更简单的方式完成隐藏，我们将使用子选择器 (>)。如果您从未使用过它，Chris Coyier explains it very well ，但基本上它只会得到直接的 child 。这样我们就可以说任何直接嵌套在 li 下的 ul 应该只在 li 悬停时显示。我们这样做:

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

编辑:MDN 在子选择器上也有一个很好的条目。看看here .

演示

同样，整个过程在 http://jsfiddle.net/4tPcL/ 处以 fiddle 形式展示。 .希望这对您有所帮助!