Question

我有一个下拉菜单，每个标签中有3个子列表项，当您将鼠标移动到第二个下拉菜单列表项时，下拉菜单会出现问题。有关如何解决此问题的任何想法？我累了设置.sub-nav来悬停显示块但是这没有用，有什么想法为什么？

＆＃13;

nav {
  color: white;
  background-color: orange;
  margin: auto;
  padding: 0;
  max-width: 100%;
}
nav li > span,
nav a {
  font-size: 1.5em;
}
nav ul {
  max-height: 100%;
  text-align: right;
  max-width: 100%;
  margin: auto;
  padding: 0 5% 0 0;
}
nav li {
  max-height: 100%;
  border-style: solid;
  border-width: 0 1px 0 0;
  border-color: rgba(0, 0, 0, .1);
  display: inline-block;
  list-style: none;
  margin: 3px;
  padding: 2px;
  max-width: 100%;
}
.main-nav:hover {
  background-color: #ffcc33;
}
nav a {
  text-decoration: none;
}
nav a {
  color: orange;
}
.home-page a:visited {
  color: white;
}
nav a:visited {
  color: orange;
}
.active {
  background-color: #ffcc33;
}
.main-nav {
  position: relative;
}
.sub-nav li:hover {
  background-color: rgba(0, 0, 0, .1);
}
.sub-nav {
  position: absolute;
  display: none;
}
.main-nav:hover .sub-nav {
  display: block;
}

＆＃13;

<nav>
  <ul>
    <li class="main-nav home-page active">
      <a href="index.html">HOME</a>
    </li>
    <li class="main-nav">
      <span> Content 1 </span>
      <ul class="sub-nav">
        <li><a href="page1.html">Page 1</a>
        </li>
        <li><a href="page2.html">Page 2</a>
        </li>
        <li><a href="page3.html">Page 3</a>
        </li>
      </ul>
    </li>
    <li class="main-nav">
      <span> Content 2 </span>
      <ul class="sub-nav">
        <li><a href="page4.html">Page 4</a>
        </li>
        <li><a href="page5.html">Page 5</a>
        </li>
        <li><a href="page6.html">Page 6</a>
        </li>
      </ul>
    </li>
    <li class="main-nav">
      <span> Content 3 </span>
      <ul class="sub-nav">
        <li><a href="page7.html">Page 7</a>
        </li>
        <li><a href="page1.html">Page 8</a>
        </li>
        <li><a href="page1.html">Page 9</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

＆＃13;

Answer 1

这是因为你的导航中有一个max-height设置为所有ul。如果你删除它，那么它将正常工作。

  nav ul {
    max-height: 100%; <-- here
    text-align: right;
    max-width: 100%;
    margin: auto;
    padding: 0 5% 0 0;
    }

如果你需要max-height，那么只需将它应用于nav的第一个孩子（nav＆gt; ul）。

nav > ul {
    max-height: 100%;
}

Codepen示例 - https://stackoverflow.com/a/36845604/215945

如何让我的下拉菜单在第一个列表项后不会消失？

1 个答案: