Question

我正在尝试制作一个菜单而且我被卡住了。我想知道是否有人有一些想法而没有太多的黑魔法（js和东西）。

这是我的CSS：

* {
    margin: 0;
    padding: 0;
    list-style: none;
}
.wrap {
    background: red;
}
.ul-one {
    background: green;
    position: static;
    display: inline-block;
}
.ul-two {
    background: gray;
    position: absolute;
    left: 50px;
    top: 0;
}

和HTML：

<div class="wrap">
    <ul class="ul-one">
        <li>um</li>
        <li>dois</li>
        <li>tres</li>
        <li>quatro</li>
        <li>
            <ul class="ul-two">
                <li>__um</li>
                <li>__dois</li>
                <li>__tres</li>
                <li>__quatro</li>
                <li>__cinco</li>
                <li>__seis</li>
                <li>__sete</li>
                <li>__oito</li>
                <li>__nove</li>
                <li>__dez</li>
                <li>__once</li>
            </ul>
        </li>
    </ul>
</div>

这是jfiddle： http://jsfiddle.net/4m5g09Lb/

我希望父母（红色div）与孩子们一起成长。我正在网上阅读很多并找到了一些解决方案，但是当使用绝对位置时它们都不起作用。这个结构将在更多的div中，但我认为如果在某些级别工作，它将适用于很多级别。

提前致谢。

Answer 1

你可以使用

ul:nth-child(even){
}

适用于所有儿童

ul:nth-child(odd){
}

所有奇怪的孩子。

Box模型位置和菜单上的流程（绝对位置）

1 个答案: