0

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

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

<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文件..希望我得到了一切

4

1 回答 1

0

请改用此 CSS：

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

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

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

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

这是结果：

嵌套列表

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

于 2012-09-18T07:19:07.797 回答