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

Question

我之前问了一个更基本的问题(How can I position an inner tag at different position?)，并且得到了完美的回答。但是我忘记了更深的子级别..基本问题是顶级元素在页面上的显示位置与次级元素不同。

所以结构现在看起来像这样:

<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">Item 1.1</a>
                        <ul>
                            <li class=""><div class="body-menu">
                                <a href="bla">Item 1.1.1</a>
                            </div></li>
                            <li class="current deepest-menu"><div class="body-menu">
                                <a href="bla">Item 1.1.2</a>
                            </div></li>
                        </ul>
                    </div></li>
                    <li class=""><div class="body-menu">
                        <a href="bla">Item 1.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>

我使用这段代码解决了在左侧菜单中显示子级菜单并在其原始位置(顶部菜单)显示顶级菜单的基本问题

.body-menu > ul > li {
 position:relative;
 padding-bottom: 1em;
}
.body-menu ul ul {
 position:absolute;
 left:10px;
 top:30px;
}

但是现在 1.1.1 级别的元素显示在 1.1 级别的元素之上......

有没有简单的解决方案？

在任何情况下都感谢您的帮助!--克里斯勒

---

更新

css 东西 http://jsfiddle.net/crisler/wZrVS/ (简单的) http://jsfiddle.net/crisler/pMTHX/1/ (更多元素..)有点拥挤，因为其中大部分来自大学的 css 文件。希望我得到了一切

Answer 1

改用这个 CSS:

.body-menu ul ul.second-level {
    position:absolute;
    left:10px;
    top:30px;
}

并向紧接在第一级元素(即 Item 1)之后的所有 ul 添加一个 second-level 类, 元素 2, ...):

<a href="bla">Item1</a>
    <ul class="second-class">

问题是您将该 CSS 规则应用于代码中的所有子列表。通过此更改，它只会影响第二级列表，其余的将正常运行。

这是结果:

这是经过编辑的 fiddle (有更多元素的 fiddle ):http://jsfiddle.net/pMTHX/2/