How to implement a drop-down menu with pure CSS

This time to bring you a pure CSS how to implement the drop-down menu, pure CSS Implementation of the drop-down menu of considerations, the following is the actual case, together to see.

This article mainly introduces the pure CSS implementation of the drop-down menu sample code, to share to you, specifically as follows:

Set the UL height of the drop-down menu to 0, and the out-of-section is hidden.

Sets the height of the drop-down menu to add a transition effect, which is invalidated when the height is auto.

<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= "#" > Drop-down menu </a> <u  L class= "drop-down-content" > <li><a href= "#" > Menu 1</a></li> <li><a href= "#" > Menu 2</a></li> <Li><a href= "#" > Menu 3</a></li> </ul> </li></ul><p> content </p> 

As follows:

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Redraw and rearrange how to use

Canvas animation for rotating Tai Chi