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

我怎样才能实现这个目标？

@edit：

这是我使用的CSS。我做的很简单，工作正常（我在菜单下放置子菜单有问题，但位置：绝对修复它）

#menu ul {
        position: relative;
}

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

#menu ul li ul {
    position: absolute;
}

Answer 1

在没有看到你的代码的情况下，我会将你的外部ul的容器设置为relative，然后将你的嵌套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/

css＆amp; html孩子不受容器尺寸的影响

1 个答案: