Wie verhindere ich, dass Links in einem CSS-Dropdown-Menü auf mehrere Zeilen umlaufen?

Ich habe ein CSS-Dropdown-Menü, in dem die Hyperlinks darauf bestehen, auf mehrere Zeilen umgebrochen zu werden.
Ich habe das CSS und das Markup auf seine nackten Knochen reduziert, damit Sie es hier sehen können:

<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%;
}

Hier ist ein jsFiddle, um das Problem zu demonstrieren: http://jsfiddle.net/nA7Jf/

Normalerweise würde ich Float left auf den Listenelementen nicht verwenden, aber leider ist dies ein WordPress-Theme und ich möchte nicht zu viele Änderungen daran vornehmen.
Ich muss nur einen Weg finden, um zu verhindern, dass der Linktext umbrochen wird, damit ich ihn mit benutzerdefiniertem CSS hinzufügen kann.

Hinzufügen white-space: nowrap; und entfernen float für Kindermenüs lis reicht:

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