Выпадение CSS Удалить текст Wrap

Question

Как удалить перенос текста для дочерних элементов в выпадающем меню?

JSFiddle с CSS здесь: http://jsfiddle.net/6Bqfn/4/

<ul> 
<li><a href="#">Home</a></li> 
<li><a href="#">Shop</a> 
<ul class="children"> 
    <li><a href="#">Longer Title</a></li> 
    <li><a href="#">Short</a></li> 
    <li><a href="#">Short</a></li> 
</ul> 
</li> 
</ul> 

Я не могу получить ул проведения дочерних элементов для изменения размера к размеру самого большого ребенка ли.

Answer 1

Вы могли бы попробовать что-то подобное вложение неразрывного пространства ...

<a href="#">Longer&nbsp;Title</a> 

Answer 2

Вам нужно включить white-space:nowrap; в вашем CSS для элементов, которые вы хотите, чтобы не завернуть:

ul.children li { 
    white-space:nowrap; 
} 

Это заставит все элементы отображаться на одной строке, и поскольку все ваши ширины будут установлены в автоматическое, оно будет соответствующим образом расширяться. Я также обновил ваш jsFiddle.