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

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

如果要在主菜单和第二级菜单之间留一些空隙。您可以通过添加下面给出的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>