我有两层菜单 - 一个 ul 和另一个嵌套的 ul, - 一个带有下拉子菜单的菜单,例如:
<div id="menu">
<ul>
<li>Menu item</li>
<li>Menu item
<ul>
<li>Sub Menu item</li>
<li>Sub Menu item</li>
</li>
</ul>
<li>Menu item
<ul>
<li>Sub Menu item</li>
<li>Sub Menu item</li>
</li>
</ul>
</li>
</ul>
</div>
第一个 ul 以内联方式显示,而第二个 ul 以 block 方式显示,并使用 JQuery 隐藏和显示。
我有以下 CSS 将子菜单 ul 定位在它们各自的父级 li 下:
#menu UL LI {
list-style-type: none;
display: inline;
padding: 10px;
position: relative;
}
#menu UL LI UL {
display: none;
z-index: 999;
position: absolute;
}
#menu UL LI UL LI {
display: block;
width: 100px;
}
我的问题是,在 FireFox 和 IE 中,子菜单项没有出现在它们各自的父项下。但是它在 Chrome 和 Safari 中运行良好。
我认为这是执行此操作的正确方法,但有人知道更好的方法吗?
最佳答案
要达到您想要的状态,需要进行一些小的更改:
#menu ul li {
+ display: inline-block;
- padding: 10px;
+ padding: 0 10px 0 10px;
}
#menu ul li ul li {
+ padding: 10px;
}
关于jquery - 父菜单下的位置子菜单在 IE/FF 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14992568/