Question

I have a ul list menu that goes three levels deep. I’d like all the FirstMenu list items to sit next to each other horizontally, while the nested and vertically aligned Second and ThirdMenus sit below the three horizontal FirstMenu items. Nothing I’ve tried so far in the CSS (floats, relative/absolute positioning, margins/padding) prevents the FirstMenus from dropping down to sit below the Second and ThirdMenus. Suggestions welcomed!

    <ul id="footermenu">
     <li class="firstfootermenu">FirstMenu1      
      <ul class="subfootermenu">
        <li>SecondMenu1
          <ul class="subsubfootermenu">
            <li>ThirdMenu1</li>
            <li>ThirdMenu2</li>
            <li>ThirdMenu3</li>
         </ul>
       </li>
      </ul>
     </li>
    <li class="secondfootermenu"><a href="#">FirstMenu2</a></li>
    <li class="secondfootermenu"><a href="#">FirstMenu3</a></li>
   </ul>

Answer 1

Just use display: inline-block; vertical-align: top or float: left on the immediate successors of the first ul: http://jsfiddle.net/jmAUJ/ or http://jsfiddle.net/8etkS/

EDIT: Updated jsFiddle with new layout http://jsfiddle.net/jmAUJ/1/