出于某种原因,当我尝试显示下拉列表时,我的WordPress生成的菜单会导致一些问题。父菜单项变为全宽,然后覆盖其他项。这就是悬停状态下的样子:
以下是代码的小提琴:https://jsfiddle.net/j55scjeq/
这是CSS:
rest
这是HTML:
/* Navigation */
#nav {
margin: 100px 0;
background-color: #E64A19;
z-index: 999;
overflow: visible;
}
/* Removing padding, margin and "list-style" from the "ul",
* and adding "position:reltive" */
#nav ul {
padding:0;
margin:0;
list-style: none;
position: relative;
z-index:;
}
/* Positioning the navigation items inline */
#nav ul li {
margin: 0px -7px 0 0;
display:inline-block;
background-color: #E64A19;
max-width: 200px;
}
/* Styling the links */
#nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
/* Background color change on Hover */
#nav a:hover {
background-color: #000000;
}
#nav ul li ul {
display: none;
position: absolute;
top: 50px;
z-index: 99;
}
/* Display Dropdowns on Hover */
#nav ul li:hover > ul {
display:block;
position: relative;
z-index: 99;
}
/* Fisrt Tier Dropdown */
#nav ul ul li {
max-width:450px;
display: block;
position: relative;
z-index: 99;
}
请有人帮我找一个解决方案。我想让孩子UL显示在一个漂亮的列中,与下面的内容重叠。
我无法弄清楚这一点。我不确定它是否与HTML或CSS有关。 :/
非常感谢。
答案 0 :(得分:3)
您只需将position: relative
设置为position : absolute
-
/* Display Dropdowns on Hover */
#nav ul li:hover > ul {
display:block;
position: absolute; /*Or you can simply remove it as you have already declared its position: absolute at #nav ul li ul */
z-index: 99;
}
试试这个并告诉我是否有任何问题。
JSFiddel - https://jsfiddle.net/j55scjeq/2/
答案 1 :(得分:1)
你需要相对于保留下拉菜单来进行#nav ul li定位 在链接区域附近
和#nav ul li:hover> ul [将位置从绝对位置更改为相对位置是主要原因]
Edite : https://jsfiddle.net/j55scjeq/3/