的更新：

Question

我有这个菜单结构：（内部<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，这正是我正在寻找的。

Answer 1

包含第二个<li>的父<ul>应位于相对位置，并且包含的<ul>应位于绝对位置。

像p：Sometihing：

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

我写了left: 145px但您可以根据您想要的菜单大小来提供您想要的任何价值。

PS：提示：不要在这些div上使用相同的“body-menu”类，对于大容器应该是不同的，而不仅仅是。我并不认为有必要在那些< li >内加入那个div。

Answer 2

.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对内联块不太好用。因此，您必须将其更改为“内联”。然后你可以省略底部填充，因为这不适用于内联元素。除非你浮动元素。编辑了上面的代码以使用float。

编辑2：拼写错误。

Answer 3

可能你想要做一些事情，比如隐藏子菜单，让鼠标悬停时弹出或显示。请查看http://cssmenumaker.com/builder/42231示例。

如何将内部标签定位在不同位置？

的更新：

3 个答案: