本文主要介紹了純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>
如下: