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

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

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

有点像：

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为例。