Question

我正在学习如何构建纯CSS下拉菜单，而且我看到了一个奇怪的问题。我已经搜索过，并且找不到任何有用的东西。

如果您将鼠标悬停在博客链接上，则会看到＆＃34;案例研究＆＃34;分成两半，＆＃34;案例＆＃34;在一条线和＆＃34;研究＆＃34;在下一行。

我＆＃39;我检查了我的HTML，它看起来很好。这是漫长的一天，所以也许我错过了一些明显的东西。：○

到目前为止，我有这个：

    <nav class="p-nav">
        <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Showcase</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Blog</a>
                <ul>
                    <li><a href="#">Case Studies</a></li>
                    <li><a href="#">Tutorials</a>
                        <ul>
                            <li><a href="#">CSS</a></li>
                            <li><a href="#">Javascript</a></li>
                            <li><a href="#">Playground</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

@import url(http://fonts.googleapis.com/css?family=Lato:300, 400);

.p-nav li {
    position: relative;
}

.p-nav ul ul {
    display: none;
    position: absolute;
    top: 100%;
}

.p-nav ul li {
    float: left;
}

.p-nav a {
    display: block;
    font: 300 100%/70px"Lato", sans-serif;
    padding: 0 30px;
}

.p-nav ul li:hover > ul {
    display: block;
}

以下是代码的链接：http://jsfiddle.net/6CwYh/20/

任何人都可以解释为什么会这样做，以及我如何解决它？

TIA。

Answer 1

空间原因＆＃34;问题＆＃34;它将这两个词放在两行上。如果您不喜欢，可以将white-space:nowrap;添加到<li>，以便它能够换行，看看小提琴：http://jsfiddle.net/6CwYh/21/

.p-nav li {
    position: relative;
    white-space:nowrap;
}

Answer 2

没有足够的空间让文字适合，这就是它包装的原因。给第二级ul宽度，如350px。

http://jsfiddle.net/6CwYh/24/

另外，请确保使用直接后代运算符（＆gt;）我在上面的链接中添加了一些。

如果我定位#something ul li即使它们是嵌套的，它实际上会定位#something中的所有uls和所有lis。

这导致下拉列表中的项目浮动，这导致了进一步的问题。

/* Better selectors */
#something > ul {}
#something > ul > li {}
#something > ul > li > ul {}
#something > ul > li > ul > li {}

Answer 3

扩大范围：

nav ul li{
    width:200px;
}

及其固定的

CSS下拉菜单，链接减半

3 个答案: