純CSS實現(xiàn)下拉菜單的示例代碼
發(fā)布時間：2018-01-09 16:20:34 作者：kuang 
我要評論
我要評論這篇文章主要介紹了純CSS實現(xiàn)下拉菜單的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
本篇文章主要介紹了純CSS實現(xiàn)下拉菜單的示例代碼，分享給大家，具體如下：
將下拉菜單的ul高度設(shè)置為0，并且超出部分隱藏掉。
設(shè)置下拉菜單的高度添加過渡效果，高度為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>內(nèi)容</p>
效果圖如下：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
基于css3制作圓形下拉框，點擊滑動展開收縮城市菜單，支持多選/勾選城市效果。這是一款實用的下拉菜單選擇代碼。非常不錯，感興趣的朋友前來下載使用2019-05-28
這篇文章主要介紹了CSS中的導(dǎo)航欄和下拉菜單的實現(xiàn)的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-18
這篇文章主要介紹了HTML+CSS實現(xiàn)下拉菜單的實現(xiàn)的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-18- 下拉菜單在很多網(wǎng)頁中都能應(yīng)用到，這篇文章主要介紹了純CSS實現(xiàn)的大型下拉菜單的示例代碼的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編2018-05-03
純css3制作鼠標(biāo)懸停波浪形狀彈性下拉菜單特效源碼
純css3制作鼠標(biāo)懸停波浪形狀彈性下拉菜單特效源碼，當(dāng)鼠標(biāo)懸停波浪形菜單欄，彈出列表信息，鼠標(biāo)離開自動收縮。效果非常逼真，本段代碼可以在各個網(wǎng)頁使用，有需要的朋友可2017-12-18
這是一個使用HTML和純CSS代碼來制作的大型下拉菜單效果。適合用于欄目分類較多的網(wǎng)站使用，歡迎下載2017-10-26- 使用Html+css實現(xiàn)簡單的下拉菜單代碼非常簡單，具有參考借鑒價值，需要的的朋友參考下吧2017-06-22
這篇文章主要介紹了利用純css做一個下拉菜單功能的示例代碼,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-01
