My current setup includes a nested list structured like this:
<ul>
<li>
<a href="#" class="">Parent Links</a>
<!-- The Flyoutwrapper is designed to expand when users hover over the parent links. Since its contents will be dynamic, I cannot set fixed dimensions -->
<div class="flyoutWrapper">
<ul class="flyout fourCol">
<li></li>
<li></li>
</ul>
</div>
</li>
</ul>
I am struggling with getting all the li elements inside the "flyout fourCol" class to float next to each other in columns. Without setting a minimum width of around 900px, each li element collapses beneath the previous one.
This is the desired appearance for my dropdown menu:
#nav .flyout.fourCol { min-width:900px; }
http://jsfiddle.net/t7esz/ (this solution works as expected)
#nav .flyout.fourCol { width:auto; }
http://jsfiddle.net/sumcA/2/ (unfortunately, this approach does not achieve the desired layout)