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。

我在菜单悬停上方添加了以下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>

（哦，我通过将文本装饰设置为无来删除下划线-这只是我个人的喜好-您可以再次删除它。）

导航下拉问题

1 个答案: