Html CSS扩展导航问题

我们有一些如何设法推出一个css可扩展导航的东西。。。我面临的问题是，你可以通过鼠标在主页上看到它的扩展，但你也会看到最后一个菜单是空白的。。。以及当你看到组合鼠标在你会看到有3个菜单只买实际上有5

最终我想要的是，我们提供的子菜单的总数可能是10个、5个、3个甚至2个。主菜单应该展开并显示相同的子菜单

你能帮我解决这个问题吗

HTML代码

<div class="nav">
        <div class="menu-item alpha">
          <h4><a href="#">User Managment</a></h4>
          <ul>
            <li><a href="#">View Users</a></li>
            <li><a href="#">Edit User</a></li>
          </ul>
        </div>

        <div class="menu-item">
          <h4><a href="#">Portfolio</a></h4>
          <ul>
            <li><a href="#">Web</a></li>
            <li><a href="#">Print</a></li>
            <li><a href="#">Other</a></li>
            <li><a href="#">Other</a></li>
            <li><a href="#">Other</a></li>
            <li><a href="#">Other</a></li>
          </ul>
        </div>

        <div class="menu-item">
          <h4><a href="#">About</a></h4>
          <ul>
            <li><a href="#">History</a></li>
            <li><a href="#">Meet The Owners</a></li>
            <li><a href="#">Awards</a></li>
          </ul>
        </div>

        <div class="menu-item">
          <h4><a href="#">Contact</a></h4>
          <ul>
            <li><a href="#">Phone</a></li>
            <li><a href="#">Email</a></li>
            <li><a href="#">Location</a></li>
          </ul>
        </div>
    </div>

---

尝试更改

。菜单项：将ul

class

height

悬停到

auto

，您将其高度限制为93px。所以剩下的链接被隐藏了

.menu-item:hover ul {
  height: auto;

}

更新的：

CSS:

---

添加以下内容，它应该可以根据需要工作，基本上您需要动画继续工作的高度（以像素为单位），因此将其设置为“自动”将中断动画。在下面的代码中，我认为菜单中每个项目的高度为31px

.menu-item:hover ul {
  height: 93px;

}

.menu-item:nth-child(1):hover ul {
  height: 63px;

}

.menu-item:nth-child(2):hover ul {
  height: 155px;

}

---

第n个子项与每个菜单块的索引有关用户管理是第n个子项（1）公文包是第n个子项（2）等等阅读关于第n个子项选择器的内容也不要忘记将答案标记为正确，这样可以帮助其他人我只是试图将答案标记为正确。。。但是我不能。。。我是一个新的用户来叠加流量。。。菜单项：第n个孩子（2）：悬停ul{height:186px；}我曾考虑过5个菜单项不要忘记将答案标记为正确，这样可以帮助其他人Shey shaym猜你找到了答案：）

.menu-item ul {     
  max-height: 0px;  

  /*Animation*/
  -webkit-transition: max-height 2s ease;
     -moz-transition: max-height 1s ease;
       -o-transition: max-height 1s ease;
      -ms-transition: max-height 1s ease;
          transition: max-height 1s ease;
}


.menu-item:hover ul {
  max-height: 1000px;

}

.menu-item:hover ul {
  height: 93px;

}

.menu-item:nth-child(1):hover ul {
  height: 63px;

}

.menu-item:nth-child(2):hover ul {
  height: 155px;

}