html - 下拉菜单以零边距消失

Question

我知道这个问题已经被问过很多次了，但我正在开发一个 Wordpress 主题，并且我的子菜单的样式完全符合我的要求。但是，它们会在悬停时消失。我已将我所有的 margin-tops 设置为零，如之前在 Stack 上所述，但它们仍然无法正常工作。

我的这个顶部导航的 CSS 如下:

.top-nav {
background-color: #444;
min-height: 40px;
}

.top-nav ul {
margin-bottom: 0;
}

.top-nav li {
margin: 0 20px 0 0;
padding: 0;
float: left;
display: inline-block;
position: relative;
}

.top-nav li a {
color: #aaa;
font-size: 12px;
line-height: 40px;
}

.top-nav li a:hover, .top-nav li.current-menu-item a {
color: #fff; 
background-color: #444;
}

.top-nav ul li ul.sub-menu {
display: none; 
margin-top:0px;}

.top-nav ul li:hover > .sub-menu { 
display: block; 
position: absolute; 
height: 0px; 
margin-top:-5px; 
overflow: visible; 
margin-left:0px;}

.top-nav li.menu-item ul li { 
display: block; 
position:relative; 
width: 100%; 
float: left; 
margin:0px; 
padding:5px 0 5px 10px; 
background-color:#444!important;
border-bottom: 1px solid #faf3bf;}

.top-nav ul li.menu-item ul li a {
width: inherit; 
padding: 0;}

如有任何帮助，我们将不胜感激。

Answer 1

必须添加:

z-索引:1； .top-nav li.menu-item ul li

标题的 H3 覆盖了下拉列表。