html - 将嵌套 ul 放置在右侧

Question

我目前正在构建一个自定义导航下拉菜单，为此我想将由父 li 包装的 ul 放在其父级旁边。

导航将在第一个级别周围有一个边框，该边框还应包含其他级别。 将 ul absolute 定位到下一个级别 ul 会做一些工作，但不是按照要求。 fiddle 在底部。

Default view:

- Level 1
- Level 1
    - Level 2
        - Level 3
        - Level 3
    - Level 2
    - Level 2
    - Level 2
- Level 1

Desired output:

- Level 1    - Level 2    - Level 3
- Level 1    - Level 2    - Level 3
- Level 1    - Level 2
             - Level 2

Example:

-------------------------------
| Level 1 | Level 2 | Level 3 |
| Level 1 | Level 2 | Level 3 |
| Level 1 | Level 2 |         |
|         | Level 2 |         |
-------------------------------

---

基本语法:

<ul>
    <li>Level 1</li>
    <li>
        Level 1
        <ul>
            <li>
                Level 2
                <ul>
                    <li>Level 3</li>
                    <li>Level 3</li>
                </ul>
            </li>
            <li>Level 2</li>
            <li>Level 2</li>
            <li>Level 2</li>
        </ul>
    </li>
    <li>Level 1</li>
</ul>

Minified current solution

Answer 1

如果不使用 JavaScript 或修改 DOM 结构，我认为这是不可能的。

您想要它做的是删除布局，以便所有 LI 彼此相邻，但是您还想保留它，以便保持整个容器的高度。

因此，这是一个有效的 JavaScript 解决方案:http://jsfiddle.net/w8oe59rp/8/

var arrUL = document.querySelectorAll('ul'),
    MaxHeight = 0;
for (var i = 0; i < arrUL.length; i++) {
    var intHeight = arrUL[i].offsetHeight;
    if (intHeight > MaxHeight) {
        MaxHeight = intHeight;   
    }
}
document.querySelector('.main').style.height = MaxHeight + 'px'

* {
    box-sizing:border-box;
}
ul {
    list-style: none;
    padding: 8px 16px;
    margin-top: -1px;
    width: 15em;
    margin-bottom: 0;
}
li {
    width: 5em;
}
.main {
    float:left;
    position:relative;
    border: 1px solid;
}
.main:before {
    content:"";
    border-left:1px solid;
    top:0;
    left:33.33%;
    height:100%;
    position:absolute;
}
.main:after {
    content:"";
    border-left:1px solid;
    top:0;
    right:33.33%;
    height:100%;
    position:absolute;
}
ul ul {
    position:absolute;
    top:0;
    left:33.33%;
    width:5em;
}
ul ul ul {
    left:100%;
}

<ul class="main">
    <li>Level 1</li>
    <li>Level 1
        <ul>
            <li>Level 2
                <ul>
                    <li>Level 3</li>
                    <li>Level 3</li>
                </ul>
            </li>
            <li>Level 2</li>
            <li>Level 2</li>
            <li>Level 2</li>
        </ul>
    </li>
    <li>Level 1</li>
</ul>