3

我有一个 CSS 下拉菜单，其中的超链接坚持要换行到多行。
我已经将 CSS 和标记剥离到了最基本的部分，供您在此处查看：

<ul id="topnav" class="sf-menu">
<li id="menu-item-190"><a href="#">Menu Item</a>
    <ul class="sub-menu">
        <li id="menu-item-297"><a href="#">Sub Menu Item 1</a></li>
        <li id="menu-item-315"><a href="#">b dfgbfgbdbg bgfdb</a></li>
        <li id="menu-item-344"><a href="#">bfgf fgdgdf bgfb</a></li>
        <li id="menu-item-436"><a href="#">Hfgbfggfdfb</a></li>
        <li id="menu-item-561"><a href="#">dbgd</a></li>
        <li id="menu-item-564"><a href="#">bggf fbggf fgbdfbdf</a></li>
        <li id="menu-item-571"><a href="#">fgb fdbg bfgbdf</a></li>
        <li id="menu-item-574"><a href="#">kuyvkuycs ukygo guyh oiuhyoi uih sds</a></li>
        <li id="menu-item-577"><a href="#">sdcdsd dsdscsdsdc</a></li>
    </ul>
</li>


.sf-menu {
    list-style: none;
}

.sf-menu li {
    position: relative;
    float: left;
    border: 1px solid grey;
    padding: 5px;
}

.sf-menu ul {
    list-style: none;
    position: absolute;
    top: -999em;
    padding: 0px;
}

.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
    top: 100%;
}

这是一个 jsFiddle 来演示这个问题：http: //jsfiddle.net/nA7Jf/

通常我不会在列表元素上使用 float left，但不幸的是这是一个 wordpress 主题，我不想对其进行太多更改。
我只需要找出一种方法来防止链接文本换行，这样我就可以使用自定义 CSS 添加它。

4

1 回答 1

3

添加white-space: nowrap;和删​​除float子菜单的lis就足够了：

.sf-menu .sub-menu li {
    white-space: nowrap;
    float: none;
}
于 2013-08-10T18:19:17.493 回答