将嵌套的无序列表样式化为列

Question

我希望将嵌套列表显示为一组列。

列表的每个级别都应该是一个新列，并且所有列应该对齐到顶部。事情是这样的：

显示子菜单或不容易够了，但我不能让定位，而不一些奇怪的负面顶部或类似的东西的工作。

是否有一些逻辑和整洁的方式来实现这一目标？

我的代码here in jsfiddle

<div id="menu"> 
    <ul> 
     <li>Top 1 
      <ul> 
       <li>Sub 1.1</li> 
       <li>Sub 1.2</li> 
       <li>Sub 1.3</li> 
      </ul> 
     </li> 
     <li class='current-item'>Top 2 
      <ul> 
       <li>Sub 2.1</li> 
       <li class="current-item">Sub 2.2 
        <ul> 
         <li>Bottom 2.2.1</li> 
         <li>Bottom 2.2.2</li> 
         <li>Bottom 2.2.3</li> 
         <li class="current-item">Bottom 2.2.4</li> 
        </ul> 
       </li> 
       <li>Sub 2.3</li> 
       <li>Sub 2.4</li> 
       <li>Sub 2.5</li> 
       <li>Sub 2.6</li> 
      </ul> 
     </li> 
     <li>Top 3 
      <ul> 
       <li>Sub 3.1</li> 
       <li>Sub 3.2</li> 
       <li>Sub 3.3</li> 
       <li>Sub 3.4</li> 
      </ul> 
     </li> 
    </ul> 
</div> 

而且骨架SCSS的开头：

#menu { 
/* top level */ 
ul { 
    border: 1px solid black; 
    list-style: none; 
    li 
     /* sub level */ 
     ul { 
      display: none; 
      li { 
       /* bottom of the pit */ 
       ul { 
        li { 
        } 
       } 
      } 
     } 
    } 
} 
} 

#menu .current-item > ul{ 
    display: block; 
} 

赞成吗？

Answer 1

这是关于参照定位子的父ul而不是像传统，在li

JSFiddle Demo

新增CSS

#menu > ul { 
    position: relative; 
    display: inline-block; 
} 
#menu >ul > li ul { 
    position: absolute; 
    top:0; 
    left:100%; 

} 

Answer 2

我一直在寻找类似的东西这一点，但不知何故Paulie_D的例子不适合我（列对齐看起来不正确）。我摆弄自己周围，有以下可能的解决方案提出了：

https://jsfiddle.net/lumpie/jrrp1hy2/

#menu { 
    width: 100%; 
    * { 
    margin: 0; 
    padding: 0; 
    } 
    li { 
    display: block; 
    color: black; 
    border: 1px solid black; 
    } 
    .current-item { 
    color: red; 
    > ul { 
     display: block; 
    } 
    } 
    ul { 
    list-style-type: none; 
    } 
    > ul ul { 
    display: none; 
    width: 100%; 
    position: absolute; 
    left: 100%; 
    top: 0; 
    } 
    > ul { 
    position: relative; 
    width: 20%; // = 5 columns 
    } 
}