這次帶給大家純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中文網其它相關文章！
推薦閱讀：
以上是純CSS如何實現下拉式選單的詳細內容。更多資訊請關注PHP中文網其他相關文章！
