时间戳

首页 > 解决方案 > css二级下拉菜单消失

html - css二级下拉菜单消失

问题描述

我的问题是当我移动光标时，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>

标签： htmlcssdropdown

解决方案

删除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>

推荐阅读