你好,我有一个像这样的两级菜单
<ul>
<li>MenuItem1</li>
<li>MenuItem2</li>
<li>MenuItem3
<ul>
<li>SubMenuItem3.1</li>
<li>SubMenuItem3.2</li>
</ul>
</li>
</ul>
这是一个在页面中心对齐的水平菜单,我想要做的是当选择 MenuItem3 时,它的子菜单出现,并且它的元素应该出现在 MenuItem3 下面。我描述的是这样的:
MenuItem1 MenuItem2 MenuItem3
/\
SubMenuItem3.1 SubMenuItem3.2
我已经水平完成了它并且出现了子菜单,但是 MenuItem3 的大小增加以适应子菜单的大小。所以,我得到的是这样的:
MenuItem1 MenuItem2 MenuItem3
/\
SubMenuItem3.1 SubMenuItem3.2
有什么办法可以解决吗?纯 CSS 有可能吗?
谢谢!
BenM请求后,这是我目前使用的CSS:
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu > ul > li {
position: relative;
float: left;
}
#menu > ul > li > ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu > ul > li > ul > li{
position: relative;
float: left;
}
------------------------------------
编辑vol.2
--------------------------------------
在 Sen Jacob 建议后,我对此做了一些修改 one因为我不知道每个顶级菜单项有多少子项,所以我使用 Javascript 进行适当的居中对齐。特别是我使用了 JQuery 的 width()
和 position()
函数。我希望这是有道理的。
最佳答案
你需要让 li
包含子ul
,通过不提前关闭你的 li
来做到这一点:
<li>MenuItem3</li>
<ul>
<li>SubMenuItem3.1</li>
<li>SubMenuItem3.2</li>
</ul>
变成
<li>MenuItem3
<ul>
<li>SubMenuItem3.1</li>
<li>SubMenuItem3.2</li>
</ul>
</li>
关于html - 修复水平二级 HTML 菜单/列表的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15001851/