This article mainly introduces the sample code for implementing a drop-down menu in pure CSS. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.
Set the ul height of the drop-down menu to 0 and hide the excess part.
Set the height of the drop-down menu to add a transition effect. When the height is auto, the transition effect will be invalid.
<style> ul{ list-style: none; margin: 0; padding: 0; } ul li a{ display: block; text-decoration: none; width: 100px; height: 50px; text-align: center; line-height: 50px; color: white; background-color: #2f3e45; } .drop-down{ width: 100px; height: 50px; } .drop-down-content{ opacity: 0; height: 0; overflow: hidden; transition: all 1s ease; } p{ font-size: 20px; margin: 0; } .drop-down-content li:hover a{ background-color: red; } .nav .drop-down:hover .drop-down-content{ opacity: 1; height: 150px; } </style> <ul class="nav"> <li class="drop-down"> <a href="#">下拉菜单</a> <ul class="drop-down-content"> <li><a href="#">菜单1</a></li> <li><a href="#">菜单2</a></li> <li><a href="#">菜单3</a></li> </ul> </li> </ul> <p>内容</p>
The rendering is as follows:
Related recommendations:
jQuery implementation of drop-down menu method sharing
How to use Vue's custom instructions complete a drop-down menu
Steps to implement the animated drop-down menu effect using css3
The above is the detailed content of Tutorial on how to implement drop-down menu using pure CSS. For more information, please follow other related articles on the PHP Chinese website!