I am in the process of creating a dropdown menu that works perfectly on desktop. I also want it to be responsive, where all list items are stacked underneath each other when a user clicks a menu icon.
Currently, when a user hovers over 'menu item 1', the sub-menu appears and disappears on hover. It doesn't look very elegant. Is there a simple way to incorporate a CSS3 transition to make this dropdown more visually appealing?
Thank you!
CSS
.sub-menu{
display:none;
}
li.sub-menu-parent:hover .sub-menu {
display: block;
}
HTML
<nav>
<ul>
<li class="sub-menu-parent"><a href="#">Menu Item 1</a>
<ul class="sub-menu">
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
</ul>
</li></ul>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">Menu Item 4</a></li>
<li><a href="#">Menu Item 5</a></li>
</ul>
</nav>