Question

我有一个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，但不幸的是这是一个wordpress主题，我不想对它进行太多更改。
我只需要想办法防止链接文本被包装，这样我就可以使用自定义CSS添加它。

Answer 1

为子菜单的white-space: nowrap; s is enough添加float并删除li：

.sf-menu .sub-menu li {
    white-space: nowrap;
    float: none;
}

如何在CSS下拉菜单中阻止链接包装到多行？

1 个答案: