CSS 第二级下拉列表消失

Question

我的问题是 Html/Css 下拉第二级消失了，我移动了光标，目前在 iPhone 上的 Safari 上工作正常，但没有我尝试过的其他浏览器。

似乎与 CSS 中的宽度有关，如果我设置一个固定的 px 值，一切似乎都起作用，但它不能为所有屏幕正确调整。

所有参数都是基于站点的百分比，到目前为止，跨平台工作正常。

.third-level-menu {
position: absolute;
top: 0;
width: auto;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu>li {
height: 30px;
background: #FFF;
}
.third-level-menu>li:hover {
background: #FFF;
}
.second-level-menu {
position: absolute;
top: 30px;
left: 0;
height: auto;
width: auto;
list-style: none;
padding: 0;
margin: 0;
display: none;
z-index: 100;
}
.second-level-menu>li {
position: relative;
height: auto;
background: #FFF;
width: auto;
}
.second-level-menu>li:hover {
background: #FFF;
}
.top-level-menu {
list-style: none;
padding: 0;
margin: 0;
}
.top-level-menu>li {
position: relative;
float: left;
height: auto;
width: auto;
}
.top-level-menu>.style4 {
float: left;
height: auto;
position: relative;
width: auto;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.top-level-menu>li:hover {
background: #FFF;
}
.top-level-menu li:hover>ul {
/* On hover, display the next level's menu */
display: inline;
white-space: nowrap;
}
.top-level-menu a {
font: bold 14px Arial, Helvetica, sans-serif;
color: #093;
text-decoration: none;
padding: 0 0 0 10px;
display: block;
line-height: auto;
}
.top-level-menu a:hover {
color: #3F6;
white-space: nowrap
}
.top-level-menu a {
color: #093;
white-space: nowrap
}

<div id="topmenu">
<ul class="top-level-menu">
<li><a href="#">Home</a></li>
<li class="style4">//</li>
<li><a href="#">Eeeeeeeeee eeeeeeeeeee</a>
<ul class="second-level-menu">
<li><a href="#">Dddddddd</a></li>
<li><a href="#">Dddddddddd</a></li>
<li><a href="#">Dddddddddd</a></li>
</ul>
<li class="style4">//</li>
<li><a href="#">AAAAAAAAAA</a>
<ul class="second-level-menu">
<li><a href="#">Two long words</a></li>
<li><a href="#">Two  very long words</a></li>
</ul>
<li class="style4">//</li>
<li><a href="#">Two long words</a></li>
<li class="style4">//</li>
<li><a href="#">two words</a>
<ul class="second-level-menu">
<li><a href="#">single</a></li>
<li><a href="#">single</a></li>
<li class="style4">//</li>
</ul>
<li class="style4">//</li>
<li><a href="#">Eeeeeee</a></li>
</ul>
</div>

Answer 1

主菜单和二级菜单之间存在间隙。因此，您的悬停效果不再存在。要检查，请尝试此代码

.top-level-menu > li > a { border: 1px solid blue; }
.second-level-menu { border: 1px solid red; }

并解决此使用

.top-level-menu > li > a { padding:8px 0px; }

Answer 2

从.second-level-menu中删除top:30px将解决此问题。

如果您希望主菜单和第二级菜单之间有一些间隙。您可以通过添加下面给定的 css 来为第一个菜单选项提供一些填充 -

.second-level-menu > li:first-child {
padding-top: 10px;
}

.third-level-menu {
position: absolute;
top: 0;
width: auto;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu>li {
height: 30px;
background: #FFF;
}
.third-level-menu>li:hover {
background: #FFF;
}
.second-level-menu {
position: absolute;
left: 0;
height: auto;
width: auto;
list-style: none;
padding: 0;
margin: 0;
display: none;
z-index: 100;
}
.second-level-menu>li {
position: relative;
height: auto;
background: #FFF;
width: auto;
}
.second-level-menu>li:hover {
background: #FFF;
}
.top-level-menu {
list-style: none;
padding: 0;
margin: 0;
}
.top-level-menu>li {
position: relative;
float: left;
height: auto;
width: auto;
}
.top-level-menu>.style4 {
float: left;
height: auto;
position: relative;
width: auto;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.top-level-menu>li:hover {
background: #FFF;
}
.top-level-menu li:hover>ul {
/* On hover, display the next level's menu */
display: inline;
white-space: nowrap;
}
.top-level-menu a {
font: bold 14px Arial, Helvetica, sans-serif;
color: #093;
text-decoration: none;
padding: 0 0 0 10px;
display: block;
line-height: auto;
}
.top-level-menu a:hover {
color: #3F6;
white-space: nowrap
}
.top-level-menu a {
color: #093;
white-space: nowrap
}

<div id="topmenu">
<ul class="top-level-menu">
<li><a href="#">Home</a></li>
<li class="style4">//</li>
<li><a href="#">Eeeeeeeeee eeeeeeeeeee</a>
<ul class="second-level-menu">
<li><a href="#">Dddddddd</a></li>
<li><a href="#">Dddddddddd</a></li>
<li><a href="#">Dddddddddd</a></li>
</ul>
<li class="style4">//</li>
<li><a href="#">AAAAAAAAAA</a>
<ul class="second-level-menu">
<li><a href="#">Two long words</a></li>
<li><a href="#">Two  very long words</a></li>
</ul>
<li class="style4">//</li>
<li><a href="#">Two long words</a></li>
<li class="style4">//</li>
<li><a href="#">two words</a>
<ul class="second-level-menu">
<li><a href="#">single</a></li>
<li><a href="#">single</a></li>
<li class="style4">//</li>
</ul>
<li class="style4">//</li>
<li><a href="#">Eeeeeee</a></li>
</ul>
</div>