1

在此处输入图像描述

我需要实现这个布局，请注意当前项目，

3 个子列表应该是当前项的子项，

这里的问题是，如果我将位置设置为 absolute 和 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 （离那里很远）时出现问题：

在此处输入图像描述

所以问题是，

位置：绝对子级如何更大（并且左右属性响应布局）而父级是位置：相对？

是我唯一的机会从树中取出列表吗？

4

1 回答 1

1

您要做的是根据父母的父母设置宽度。那就是问题所在。但正如您评论的那样，菜单具有固定的宽度，这使得它更容易。

我清理了 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/

于 2013-10-07T13:34:56.333 回答