我需要实现这个布局,请备注当前项,
这 3 个子列表应该是当前元素的子列表,
这里的问题是,如果我设置绝对位置和 left:0 和 width:100%;最大宽度将根据父级的宽度确定,
所以,
如何保留子列表并让它们使用整个可用空间?
这是我现在的标记:(我可以保留它吗?)
<nav>
<ul class="main">
<li><a href="<?=base_url('grupo-cabau')?>"><?=lang('grupo-cabau')?></a></li>
<li class="active">
<a href="<?=base_url('nuestros-hoteles')?>"><?=lang('nuestros-hoteles')?></a>
<ul>
<li>
<ul>
<li>list
<ul>
<li><a href="<?=base_url('aquasol')?>">item</a></li>
<li><a href="<?=base_url('bahia')?>">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
</ul>
<ul>
<li>listt <ul>
<li><a href="#">item</a></li>
</ul>
</li>
</ul>
<ul>
<li>list
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="<?=base_url('trabaja-con-nosotros')?>"><item</a></li>
<li><a href="<?=base_url('contacto')?>">item</a></li>
</ul>
<ul class="lang">
<li>ESP
<ul>
<li>ENG</li>
<li>DEU</li>
</ul>
</ul>
</nav>
我目前的实现(差不多了):
header .wrapper > div nav ul.main > li.active > ul {
background: none repeat scroll 0 0 #FFFFFF;
display: block;
height: 141px;
left: 0;
position: absolute;
top: 60px;
width: 100%;
}
当我将 li.active 设置为 position:relative(离那里很远)时出现的问题:
问题是,
position:absolute 子项如何在父项为 position:relative 的情况下更大(左、右属性响应布局)???
我唯一的机会是从树中取出列表吗?
最佳答案
您要做的是根据父级的父级设置宽度。那就是问题所在。但是正如您评论的那样,菜单的宽度是固定的,这样更容易。
我将 HTML 整理成这样:
<ul class="nav">
<li>item 1</li>
<li>item 2
<ul>
<li>List 2.1
<ul>
<li>item 2.1.1</li>
<li>item 2.1.2</li>
<li>item 2.1.3</li>
</ul>
</li>
<li>List 2.2
<ul>
<li>item 2.2.1</li>
<li>item 2.2.2</li>
<li>item 2.2.3</li>
</ul>
</li>
<li>list 2.3
<ul>
<li>item 2.3.1</li>
<li>item 2.3.2</li>
<li>item 2.3.3</li>
</ul>
</li>
</ul>
</li>
<li>item 3</li>
<li>item 4</li>
</ul>
然后做了这个CSS:
body, ul, li {
margin: 0;
padding: 0;
list-style: none;
}
.nav {
list-style: none;
margin: 0;
padding: 0;
width: 500px; /* needs to be a fixed width */
background: lightblue;
}
.nav > li {
display: inline-block;
background: lightblue;
margin-right: -4px;
padding: 15px;
}
.nav > li > ul {
position: absolute;
display: table;
width: 500px; /* same width as .nav */
left: 0;
margin-top: 15px;
background: lightgreen;
}
.nav > li > ul > li {
display: table-cell;
width: 33%;
}
查看此演示:http://jsfiddle.net/LinkinTED/4a98c/
您可能希望在 :hover 效果上显示子菜单,检查 http://jsfiddle.net/LinkinTED/4a98c/2/
关于html - 实现这个导航菜单布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19225714/