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

Question

之前我问了一个更基本的问题（ 如何将内部标签放置在不同的位置？ ），它的回答很完美。 但是我忘记了更深的子级别。基本问题是，顶级项目在页面上的显示位置与子级别不同。

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

<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 ...

有一个简单的解决方案吗？

在任何情况下都感谢您的帮助！ --crisler

---

更新

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;
}

并将second-level类添加到所有在第一级项（即Item 1 ， Item 2 ，...）之后立即嵌套的ul ：

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

问题是，你申请的是CSS规则，在你的代码的所有子列表。 这种变化只会影响到列表中的第二级，其余的将正常。

结果如下：

这是经过编辑的小提琴（包含更多项目的小提琴）： http : //jsfiddle.net/pMTHX/2/