html - css & html child 不受容器尺寸影响

Question

我有这部分代码:

<ul>
    <li>First item</li>
    <li>second item
        <ul>
            <li>child</li>
            <li>child</li>
        </ul>
    </li>
</ul>

这是我网页上的一个菜单。 CMS 是这样打印的。现在，菜单看起来像这样:

item1 | item2 | item3 | item4
            childItem3 | childItem3 | childItem3

我想做的是用 CSS 设置子元素的样式，使其在主菜单开始的地方开始，所以它看起来像这样:

item1 | item2 | item3 | item4
childItem3 | childItem3 | childItem3

我怎样才能做到这一点？

@编辑:

这是我使用的 CSS。我把它做得非常简单并且工作正常(我在将子菜单放在菜单下时遇到了问题，但是 position:absolute 修复了它)

#menu ul {
        position: relative;
}

#menu ul li {
    display: inline-block;
}

#menu ul li ul {
    position: absolute;
}

Answer 1

在看不到你的代码的情况下，我会将你的外部 ul 的容器设置为 relative，然后将你的嵌套 ul 设置为 position:absolute 并给它一个合适的 top 值以将其推到外部列表下。

编辑:这是您可以更改 CSS 以实现您想要的结果的方式:

ul { position: relative; }

ul li { float:left; }

ul li ul { position: absolute; display:none; }

ul li:hover ul { left:0px; top:20px; display:inline; }

显然，这已经像您示例的 CSS 一样得到了简化。工作示例:http://jsfiddle.net/ZfLwD/