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 add

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 renderings are as follows:

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

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!