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: ``` Menu Item Sub Menu Item 1 b dfgbfgbdbg bgfdb bfgf fgdgdf bgfb Hfgbfggfdfb dbgd bggf fbggf fgbdfbdf fgb fdbg bfgbdf kuyvkuycs ukygo guyh oiuhyoi uih sds sdcdsd dsdscsdsdc ``` ``` .sf-menu { list-style: none; } .sf-menu li { position: relative; float: left; border: 1px solid grey; padding: 5px; } .sf-menu ul { list-style: n…

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

css, drop-down-menu, html, wordpress

Solution

Adding `white-space: nowrap;` and removing `float` for child menu's `li`s is enough:

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

Problem

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.

Original source