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。我做得很简单，效果很好（我在菜单下放置子菜单时遇到问题，但位置：绝对修复了它）

#menu ul {
        position: relative;
}

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

#menu ul li ul {
    position: absolute;
}

Answer 1

在没有看到您的代码的情况下，我会将您的外部 ul 的容器设置为相对，然后将您的嵌套 ul 设置为 position:absolute 并给它一个合适的顶部值以将其推送到外部列表下。

编辑：这是你可以改变你的 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/