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

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.