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

Question

我有一个下拉菜单，每个选项卡中都有 3 个子列表项，当您将鼠标移动到第二个下拉菜单列表项时，下拉菜单会消失，这是一个问题。关于如何解决这个问题的任何想法？我厌倦了设置 .sub-nav 以在悬停时显示 block ，但这没有用，关于为什么的任何想法？

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;
}

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

Answer 1

这是因为您为导航中的所有 ul 设置了最大高度。如果你删除它那么它会工作正常。

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

如果您需要最大高度，那么只需将其应用于导航的第一个子项 (nav > ul)。

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

Codepen 示例 - http://codepen.io/lukemeaden/pen/mPGreY