【问题标题】：How can I position an inner tag at different position?如何将内部标签放置在不同的位置？
【发布时间】：2012-09-09 15:23:42
【问题描述】：

我有这个菜单结构：（内部的<ul> 标签可以被自定义的<div> 包围，因为代码是从动态模块系统生成的，用PHP 编写的，所以其他所有结构更改都更加困难）

<div id="menu">
    <div class="body-menu">
        <ul>
            <li class="current"><div class="body-menu">
                <a href="bla">Item1</a>
                <ul>
                    <li class="current"><div class="body-menu">
                        <a href="bla">Sub-Item 1</a>
                    </div></li>
                    <li class=""><div class="body-menu">
                        <a href="bla">Sub-Item 2</a>
                    </div></li>
                </ul>
            </div></li>
            <li class=""><div class="body-menu">
                <a href="bla">Item 2</a>
            </div></li>

        </ul>
    </div>
    <div class="menu-background"></div>
</div>

目标是在左侧的第 1 项之后将内部 <ul> 显示为子菜单，而不是与其他顶级项一起显示在顶部。

有没有办法在不修改结构的情况下做到这一点？只是用CSS左右？

更新：

感谢所有答案！

尤其是对于 besluitloos 和 Caelea，这正是我要找的。p>

【问题讨论】：

你想要这样的东西吗？ jsfiddle.net/FJHVe/8

标签： php html css menu

【解决方案1】：

包含第二个<ul> 的父<li> 应该相对定位，而包含的<ul> 应该绝对定位。

有点像：

ul li { position: relative ;}
ul li ul {position: absolute; top: 0; left: 145px;}

我写了left: 145px，但你可以给它任何你想要的值，这取决于你希望你的菜单有多大。

PS：提示：不要在那些 div 上使用相同的“body-menu”类，对于大容器，它应该不同，不仅如此。而且我真的认为没有必要在< li > 中包含那个 div。

【讨论】：

解决PS：不幸的是它们是由模块系统自动放在那里的（基本上网页是一个大模块（php数组），然后生成网页）

【解决方案2】：

您可能想要做一些事情，例如隐藏子菜单并使其在鼠标悬停时弹出或显示。以http://cssmenumaker.com/builder/42231 为例。

【讨论】：

【解决方案3】：

.body-menu > ul > li {
 position:relative;
 float:left;
 padding-bottom: 1em;
}
.body-menu ul ul {
 position:absolute;
 left:0;
 top:1.3em;
 display:none;
}
.body-menu > ul > li:hover > ul {
 display:block;
}

这就是你要找的吗？

编辑：对不起，IE 不能很好地使用 inline-block。因此，您必须将其更改为“内联”。然后您可以省略底部填充，因为这不适用于内联元素。除非你浮动元素。编辑了上面的代码以使用浮点数。

编辑 2：错字。

【讨论】：