样式嵌套无序列表到列中

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
  }
}