更新

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

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

感谢每一个案例的帮助！ --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类添加到立即嵌套在第一级项目之后的所有ul（即项目1 ，项目2 ，...）：

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

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

结果如下：

nested lists

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

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

更新

1 个答案: