How can I make the parent container element (.menu.nav) expand just enough to fit the width of its top level child elements, but no more?
I don’t want it to be a fixed width, but rather, I want the width to be determined by the intrinsic width of the collection of first child elements, without wrapping to the next line.
<div class="menu nav">
<ul class="menu">
<li class="menu-item"><a href="#">Home</a></li>
<li class="menu-item"><a href="#">Contact Us</a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">Directions</a></li>
</ul>
</li>
<li class="menu-item"><a href="#">About Us</a></li>
</ul>
</div>