I have come across a nested list structure that looks like this:
<ul id="nav">
<li id="" class="">
<a href="http://site.com/wedding.html" class="">Wedding</a>
<div class="flyoutWrapper" style="display:block;">
<ul class="flyout fourCol">
<li id="" class="">
.....
</li>
<li></li>, etc
</ul>
</div>
</li>
</ul>
My goal is to arrange all the li elements inside the class "flyout fourCol" to float next to each other.
Here is the desired appearance of my dropdown menu:
#nav .flyout.fourCol { width:900px; }
http://jsfiddle.net/t7esz/ (this implementation works as intended)
#nav .flyout.fourCol { width:auto; }
http://jsfiddle.net/sumcA/2/ (unfortunately, this version does not function correctly)