Home >Web Front-end >CSS Tutorial >How to implement drop-down menu with pure CSS
This time I will show you how to implement a drop-down menu with pure CSS. What are the precautions for implementing a drop-down menu with pure CSS? Here is a practical case, let’s take a look.
This article mainly introduces the sample code for implementing the drop-down menu in pure CSS, and shares it with everyone. The details are as follows: Set the ul height of the drop-down menu to 0, and hide the excess part. Set the height of the drop-down menu and addTransition 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 renderings are as follows:
How to use Redraw and Rearrange
Canvas to create the animation of rotating Tai Chi
The above is the detailed content of How to implement drop-down menu with pure CSS. For more information, please follow other related articles on the PHP Chinese website!