Question

我目前正在构建一个自定义导航下拉列表，因为我希望将父级li包裹的ul放在其父级旁边。

导航将在第一级附近有一个边框，其中也应包含其他级别。将ul绝对定位到下一级别ul会起作用，但不是按要求。在底部小提琴。

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/

＆＃13;

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'

＆＃13;

* {
    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%;
}

＆＃13;

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

＆＃13;

Answer 2

你必须给孩子ul相关的位置。这是工作demp

＆＃13;

.container {
    height: 117px;
    position: relative;
}
ul{
    bottom: 0;
    list-style: none;
    padding: 8px 16px;
    position: absolute;
    top: 0px;
    left: 100%;
    border: 1px solid;
    margin-bottom: -1px;
    margin-top: -1px;
}

li{
    width: 5em;
}

.main{
    left: 20px;
    top: 20px;
}

.main > li ul {
    left: 0;
    position: relative;
    width: 100%;
}

＆＃13;

<div class="container">
<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>
</div>

＆＃13;

Answer 3

添加此

li ul{
    display: none;
}

li:hover{
    background-color: limegreen;
}/*just for styling*/

li:hover > ul{
    display: inline-block;
}

编辑ul填充

padding: 8px 0px 8px 16px;

jsfiddle链接 - ＆gt; http://jsfiddle.net/w8oe59rp/3/

修改

将类has-dropdown添加到已下拉的任何li，然后添加此样式

.has-dropdown{ position: relative; } .has-dropdown ul{ position: absolute; }

更新小提琴 - ＆gt; http://jsfiddle.net/w8oe59rp/4/

将嵌套ul放在右边

3 个答案: