親要素の位置が絶対的な場合にテキストラップを回避する方法は？

Question

は、私がこのような構造を持っている：

<nav> 
    <ul _v-2e9e2f12=""> 
    <li _v-2e9e2f12=""> 
     <a _v-2e9e2f12=""> 
     </a> 
     <ul _v-0078ee36="" _v-2e9e2f12=""> 
     <li>List element</li> 
     <li>List element</li> 
     <li>List element</li> 
     </ul> 
    </li> 
    </ul> 
</nav> 

ul[_v-0078ee36]はそれ内部li要素は、テキストの折り返し（なし全幅を）持ってposition: absoluteを持っています。

CSSを変更してテキストの折り返しがなく、親の幅を広げる方法は？

JSFiddle：非常にシンプルなhttps://jsfiddle.net/d9jm82cb/6/

Answer 1

：

フォース子内の空白li sがラップしないように：

nav > ul[_v-2e9e2f12] > li { 
    white-space: nowrap; 
} 

デモ：https://jsfiddle.net/d9jm82cb/7/