HTML+CSS實現(xiàn)下拉菜單的實現(xiàn)
發(fā)布時間：2018-07-18 15:03:23 作者：酷酷的波 
我要評論
我要評論這篇文章主要介紹了HTML+CSS實現(xiàn)下拉菜單的實現(xiàn)的相關資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
1.下拉列表實例
代碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<style>
*{
margin:0;
padding:0;
text-decoration:none;
list-style:none;
}
body{
text-align:center;
}
.header{
display:inline-block;
position:relative;
background-color:#4CAF50;
}
.header:hover .downbtn{
display:block;
background-color: #f1f1f1;
}
.header:hover{
background-color: #3e8e41;
}
.header span{
padding:15px;
line-height:61px;
cursor:pointer;
color: white;
}
.header .downbtn{
display:none;
position:absolute;
background-color:#f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
min-width: 160px;
}
.header .downbtn li{
line-height:30px;
text-align:left;
padding-left:5px;
}
.header .downbtn a:hover{
text-decoration:underline;
color:#f00;
}
.header .downbtn a{
display:block;
color:black;
width:100%;
}
</style>
</head>
<body>
<div class="header">
<span>下拉列表</span>
<div class="downbtn">
<ul>
<li><a href="#">下拉列表01</a></li>
<li><a href="#">下拉列表02</a></li>
<li><a href="#">下拉列表03</a></li>
<li><a href="#">下拉列表04</a></li>
<li><a href="#">下拉列表05</a></li>
</ul>
</div>
</div>
</body>
</html>
效果圖如下：
2.技術要點
- 下拉菜單需邊的子菜單隱藏（使用display:none;將元素隱藏）
- 鼠標懸浮樣式（div:hover）
- 父元素相對定位（position:relative;）
- 子元素絕對定位（position:absolute;）
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
基于css3制作圓形下拉框，點擊滑動展開收縮城市菜單，支持多選/勾選城市效果。這是一款實用的下拉菜單選擇代碼。非常不錯，感興趣的朋友前來下載使用2019-05-28
這篇文章主要介紹了CSS中的導航欄和下拉菜單的實現(xiàn)的相關資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-18- 下拉菜單在很多網(wǎng)頁中都能應用到，這篇文章主要介紹了純CSS實現(xiàn)的大型下拉菜單的示例代碼的相關資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編2018-05-03
這篇文章主要介紹了純CSS實現(xiàn)下拉菜單的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-09
純css3制作鼠標懸停波浪形狀彈性下拉菜單特效源碼，當鼠標懸停波浪形菜單欄，彈出列表信息，鼠標離開自動收縮。效果非常逼真，本段代碼可以在各個網(wǎng)頁使用，有需要的朋友可2017-12-18
這是一個使用HTML和純CSS代碼來制作的大型下拉菜單效果。適合用于欄目分類較多的網(wǎng)站使用，歡迎下載2017-10-26- 使用Html+css實現(xiàn)簡單的下拉菜單代碼非常簡單，具有參考借鑒價值，需要的的朋友參考下吧2017-06-22
這篇文章主要介紹了利用純css做一個下拉菜單功能的示例代碼,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-01
