我现在正在尝试自定义Wordpress-Theme的导航栏。我正在编辑CSS中的.main导航条目。主导航的css看起来像这样。
.main-navigation {
display: block;
width: 100%;
}
.main-navigation ul {
display: none;
list-style: none;
margin: 0;
padding-left: 0;
}
.main-navigation ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
float: left;
position: absolute;
top: 100%;
left: -999em;
z-index: 99999;
}
.main-navigation ul ul ul {
left: -999em;
top: 0;
}
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
display: block;
left: auto;
}
.main-navigation ul ul a {
width: 200px;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
left: auto;
}
.main-navigation li {
position: relative;
}
.main-navigation a {
display: block;
text-decoration: none;
}
我在导航栏的inspect元素中看到的html看起来像这样:
<div class="main-navigation">
<ul>
<li>test
<ul>
<li>test1</li>
</ul>
</li>
<li>sample page</li>
</ul>
</div>
我的导航栏在侧面,元素显示在彼此下方,因此不能彼此相邻。我希望我能正确描述我要做什么:
我希望出现在悬停下拉菜单中的子菜单内容不覆盖主导航。我希望将主菜单中的其他ul下移。将z-index更改为零并不能满足我的要求,仅当我更改任何内容时,效果才不再存在下拉列表。
如您在屏幕快照中所见,下拉菜单覆盖了其他元素。我似乎不知道该怎么办,因此test1不会覆盖示例页面,而只是将其向下推。
最诚挚的问候,在此先感谢您, 卡洛斯