1

我有这个菜单结构：（内部<ul>标签可以被一个 custom 包围<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>

<ul>目标是在左侧将第 1 项之后的内部显示为子菜单，而不是与其他顶级项目一起显示在顶部。

有没有办法在不修改结构的情况下做到这一点？只是用CSS左右？

更新：

感谢所有的答案！

特别是对于 besluitloos 和 Caelea，这正是我正在寻找的。

4

3 回答 3

0

<li>包含第二个的父级<ul>应该是相对定位的，而包含的<ul>应该是绝对定位的。

有点像：

ul li { position: relative ;}
ul li ul {position: absolute; top: 0; left: 145px;}

我写了left: 145px，但你可以给它任何你想要的价值，这取决于你想要你的菜单有多大。

PS：提示：不要在那些 div 上使用相同的“body-menu”类，对于大容器应该不同，不仅如此。而且我真的认为没有必要在这些< li >.

于 2012-09-17T12:20:17.873 回答
0 
.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 不能很好地使用 inline-block。因此，您必须将其更改为“内联”。然后您可以省略底部填充，因为这不适用于内联元素。除非你浮动元素。编辑上面的代码以使用浮点数。

编辑2：错字。

于 2012-09-17T12:24:11.373 回答
0

可能你想做一些事情，比如隐藏子菜单，让它在鼠标悬停时弹出或显示。以http://cssmenumaker.com/builder/42231为例。

于 2012-09-17T12:25:45.100 回答