我目前正在构建一个自定义导航下拉列表,因为我希望将父级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>
答案 0 :(得分: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'
&#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;
答案 1 :(得分:0)
你必须给孩子ul相关的位置。 这是工作demp
.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;
答案 2 :(得分:0)
添加此
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/