css - 多级 ul 列表定位

Question

我有一个三层深的 ul 列表菜单。我希望所有 FirstMenu 列表项水平并排放置，而嵌套且垂直对齐的 Second 和 ThirdMenus 位于三个水平 FirstMenu 项下方。到目前为止，我在 CSS 中所做的任何尝试( float 、相对/绝对定位、边距/填充)都无法阻止 FirstMenus 下降到 Second 和 ThirdMenus 下方。欢迎提出建议!

    <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

只需使用 display: inline-block; vertical-align: top 或 float: left 在第一个 ul 的直接后继者上:http://jsfiddle.net/jmAUJ/或 http://jsfiddle.net/8etkS/

编辑:使用新布局更新了 jsFiddle http://jsfiddle.net/jmAUJ/1/