Pure CSS Implementation drop-down menu method tutorial

This article mainly introduces the pure CSS implementation of the drop-down menu example code, small series feel very good, and now share to everyone, but also for everyone to do a reference. Follow the small series together to see it, hope to help everyone.

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: