Show nested dropdown with overflow hidden set to parent dropdown - html

Question

I have a dropdown menu nested in a parent dropdown. The parent dropdown is set to overflow: hidden, and I use max-height to animate the height transition. So it must have overflow: hidden for that animation to work properly. The problem is now I have a child dropdown nested in that parent dropdown. Becuase the parent dropdown is overflow: hidden, so the child dropdown is hide by the parent dropdown.
My question is: Is there a way to animate the height of the parent dropdown and also show the child dropdown? I do not want to animate the opacity. I think for max-height to animate, we must set the dropdown to overflow: hidden, but this will hide all the child dropdown. Maybe there is another way?
<div class="nav">
<div class="nav-item">
Nav Item
<ul class="dropdown">
<li> LINK</li>
<li>
LINK
<ul class="inner-dropdown">
<li>link</li>
<li>link</li>
</ul>
</li>
<li> LINK</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> LINK</li>
<li>
LINK
<ul class="inner-dropdown">
<li>link</li>
<li>link</li>
</ul>
</li>
<li> LINK</li>
<ul/>
</div>
</div>

Answer 1

By setting overflow: visible; In the dropdown class, the menu is set by giving the animation under the inner-dropdown menu.
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> LINK</li>
<li>
LINK
<ul class="inner-dropdown">
<li>link</li>
<li>link</li>
</ul>
</li>
<li> LINK</li>
<ul/>
</div>
</div>