html - 导航下拉问题

Question

我很抱歉这是一个简单的问题，我创建了一个非常简单的下拉菜单，但它没有按预期运行。我已经检查过这个问题是否存在并且之前在这里被问过，white-space: nowrap; 也修复了类似的问题，我尝试集成它但不幸的是它没有解决我的问题。我希望有人能用这个给我指明正确的方向!提前谢谢你。

* {
  padding: 0;
  margin: 0;
}

/*****
MAIN MENU
*****/
.menu ul {
  list-style: none;
  position: absolute;
  margin-top: 10px;
}

.menu ul li {
  display: inline-block;
  float: left;
}

.menu ul li a {
  background: #ccc;
  padding: 10px 20px 10px 20px;
}

/*****
DROPDOWN
*****/
.menu ul li ul {
  display: none;
}

.menu ul li:hover > ul {
  display: inline-block;
  white-space: nowrap;
  
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/*****
ANIMATION KEYFRAMES
*****/
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}  
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

<nav class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>
      <ul>
        <li><a href="#">Team</a></li>
        <li><a href="#">Roadmap</a></li>
      </ul>
    </li>
    <li><a href="#">Gallery</a>
      <ul>
        <li><a href="#">Album 1</a></li>
        <li><a href="#">Album 2</a></li>
        <li><a href="#">Album 3</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

正如您在代码片段中看到的那样，当“关于”悬停时，列表项保持在一行，但是“画廊”行为正确并且堆叠但列表项相互重叠。我认为这可能是一个简单的解决方案，但我似乎无法弄明白!

Answer 1

为了让它工作，我将悬停时的显示从 inline-block 更改为 block，并且还设置了 float:none在子 li 项上。

我在菜单悬停上方添加了这段 CSS:

.menu ul li> ul li{
  display: block;
  float:none;
  min-height:30px;
}

我将最小高度设置为 30，以考虑 10 个顶部和底部 (20) 的填充以及字体。您可以摆弄填充/边距，但设置最小高度相当有效。

希望这对您有所帮助!

*{
  padding: 0;
  margin: 0;
}

/*****
MAIN MENU
*****/
.menu ul {
  list-style: none;
  position:absolute;
  margin-top: 10px;
}

.menu ul li {
  display: inline-block;
  float:left;
}

.menu ul li a {
  background: #ccc;
  text-decoration:none;
  padding: 10px 20px 10px 20px;
}

/*****
DROPDOWN
*****/
.menu ul li> ul {
  display: none;
}

.menu ul li> ul li{
  display: block;
  float:none;
  min-height:30px;
}

.menu ul li:hover > ul{
  display: block;
  white-space: nowrap;
  
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/*****
ANIMATION KEYFRAMES
*****/
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}  
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

<nav class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>
      <ul>
        <li><a href="#">Team</a></li>
        <li><a href="#">Roadmap</a></li>
      </ul>
    </li>
    <li><a href="#">Gallery</a>
      <ul>
        <li><a href="#">Album 1</a></li>
        <li><a href="#">Album 2</a></li>
        <li><a href="#">Album 3</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

(哦，我通过将 text-decoration 设置为 none 来删除下划线 - 这只是我个人的偏好 - 你可以再次删除它..)