How do I stop links from wrapping onto multiple lines in a CSS drop down menu?

I have a CSS Drop down menu where the hyperlinks insist on wrapping onto multiple lines.
I’ve stripped the CSS and the markup down to its bare bones for you to see here:

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

Here is a jsFiddle to demonstrate the problem: http://jsfiddle.net/nA7Jf/

Normally I would not use float left on the list elements, but unfortunately this is a wordpress theme and I don’t want to make too many changes to it.
I just need to figure out a way to prevent the link text from wrapping, so that I can add it in with custom CSS.