显示嵌套下拉菜单，溢出隐藏设置为父下拉菜单

Question

我有一个嵌套在父下拉菜单中的下拉菜单。父下拉菜单设置为溢出：隐藏，我使用 max-height 为高度过渡设置动画。所以它必须溢出：隐藏才能使该动画正常工作。问题是现在我有一个嵌套在该父下拉列表中的子下拉列表。因为父下拉列表是溢出：隐藏，所以子下拉列表被父下拉列表隐藏。 我的问题是：有没有办法为父下拉列表的高度设置动画并显示子下拉列表？我不想为不透明度设置动画。我认为要使最大高度动画化，我们必须将下拉菜单设置为溢出：隐藏，但这会隐藏所有子下拉菜单。也许还有其他方法？

<div class="nav">
    <div class="nav-item">
        Nav Item
        <ul class="dropdown">   
          <li>  <a href="">LINK</a></li>
          <li>  
            <a href="">LINK</a>
            <ul class="inner-dropdown">
              <li><a href="">link</a></li>
              <li><a href="">link</a></li>
            </ul>  
            </li>
          <li>  <a href="">LINK</a></li>
        <ul/>
    </div>
</div>

body {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

.nav-item{
   width:100%
   height:20px;
   background:#56bcf9;
  text-align:center;
  font-family: 'Arial';
  font-weight: 700;
  padding: 30px 0;
  cursor: pointer;
}
.nav-item:hover .dropdown{
  max-height: 500px;
}
.dropdown{
    width:500px;
    background:#666;
    position:absolute;
    max-height: 0; 
    transition: max-height .5s ease-in; 
  overflow: hidden;
    
}

.dropdown li {
  padding: 15px;
}

.inner-dropdown {
  position: absolute;
  background: pink;
  width: 200px;
  top: 60px;
  left: 540px;
}

body {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

.nav-item{
   width:100%
   height:20px;
   background:#56bcf9;
  text-align:center;
  font-family: 'Arial';
  font-weight: 700;
  padding: 30px 0;
  cursor: pointer;
}
.nav-item:hover .dropdown{
  max-height: 500px;
}
.dropdown{
    width:500px;
    background:#666;
    position:absolute;
    max-height: 0; 
    transition: max-height .5s ease-in; 
  overflow: hidden;
    
}

.dropdown li {
  padding: 15px;
}

.inner-dropdown {
  position: absolute;
  background: pink;
  width: 200px;
  top: 60px;
  left: 540px;
}

<div class="nav">
    <div class="nav-item">
        Nav Item
        <ul class="dropdown">   
          <li>  <a href="">LINK</a></li>
          <li>  
            <a href="">LINK</a>
            <ul class="inner-dropdown">
              <li><a href="">link</a></li>
              <li><a href="">link</a></li>
            </ul>  
            </li>
          <li>  <a href="">LINK</a></li>
        <ul/>
    </div>
</div>

Answer 1

通过设置overflow: visible;在dropdown类中，通过在inner-dropdown菜单下给出动画来设置菜单。

body {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

.nav-item{
  max-width:500px;
  background:#56bcf9;
  text-align:center;
  font-family: 'Arial';
  font-weight: 700;
  cursor: pointer;
  padding:30px 0;
}
.nav-item:hover .dropdown{
  visibility:visible;
  max-height: 1000px;
}


.dropdown{
    width:500px;
    background:#666;
    position:absolute;
    max-height: 0px; 
    transition: all .5s ease-in; 
    overflow: visible;
    top:60px;
    padding:0;
    visibility:hidden;
}

.dropdown li {
  padding: 15px 0;
  color:white;
}
.dropdown li:hover .inner-dropdown{
 max-height:500px;
}
.dropdown li:hover .inner-dropdown li{
  opacity: 1; 
}
.inner-dropdown {
  position: absolute;
  background: red;
  width: 200px;
  top: 80px;
  left: 500px;
  max-height:0;
   padding:0;
  transition: all .5s ease-in-out; 
}
.inner-dropdown li {
   opacity: 0; 
   transition: all .5s ease-in-out; 
}

<div class="nav">
  <div class="nav-item">
    Nav Item
    <ul class="dropdown">
      <li> <a href="">LINK</a></li>
      <li>
        <a href="">LINK</a>
        <ul class="inner-dropdown">
          <li><a href="">link</a></li>
          <li><a href="">link</a></li>
        </ul>
      </li>
      <li> <a href="">LINK</a></li>
      <ul/>
  </div>
</div>