這次給大家帶來純CSS如何?下拉式功能表,純CSS實現下拉式功能表的注意事項有哪些,下面就是實戰案例,一起來看一下。
本篇文章主要介紹了純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>
如下:
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
重繪與重排如何使用
Canvas製作旋轉太極的動畫