本篇文章主要介紹了純CSS實現下拉菜單的示例代碼，分享給大家，具體如下：
將下拉菜單的ul高度設置為0，并且超出部分隱藏掉。
設置下拉菜單的高度添加過渡效果，高度為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="#">下拉菜單</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>效果圖如下：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
