I have a vertical navigation menu with parent and non-parent items. I want the parent items to display their child pages when hovered over, while also pushing down the items above them. HTML:
<nav class="main">
<ul>
<li>
<a href="">Lorem</a>
<ul>
<li><a href="">Ipsum</a></li>
<li><a href="">Dolor</a></li>
<li><a href="">Sit</a></li>
<li><a href="">Amet</a></li>
</ul>
</li>
<li>Something</li>
</ul>
</nav>
CSS:
nav.main ul ul {
display: none
}
nav.main ul li:hover ul {
display: block;
}
However, when the mouse leaves the parent item, the children disappear and the menu shifts suddenly, which can be disruptive. To address this issue, I tried implementing a smooth transition effect. However, using 'display' property for visibility no longer works with transitions, and switching to 'visibility' alone does not push down the children but instead makes them appear as an overlay on the menu. In the provided example https://jsfiddle.net/LgvhLxya/1/, my goal is to have the "Something" item pushed down when the children of "Lorem" are revealed.