欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML+CSS實(shí)現(xiàn)下拉菜單的實(shí)現(xiàn)

  發(fā)布時(shí)間：2018-07-18 15:03:23   作者：酷酷的波   我要評(píng)論
這篇文章主要介紹了HTML+CSS實(shí)現(xiàn)下拉菜單的實(shí)現(xiàn)的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

1.下拉列表實(shí)例

代碼如下：

<!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.技術(shù)要點(diǎn)

  • 下拉菜單需邊的子菜單隱藏（使用display:none;將元素隱藏）
  • 鼠標(biāo)懸浮樣式（div:hover）
  • 父元素相對(duì)定位（position:relative;）
  • 子元素絕對(duì)定位（position:absolute;）

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • js+css3制作下拉城市菜單多選代碼

    基于css3制作圓形下拉框，點(diǎn)擊滑動(dòng)展開收縮城市菜單，支持多選/勾選城市效果。這是一款實(shí)用的下拉菜單選擇代碼。非常不錯(cuò)，感興趣的朋友前來下載使用
    2019-05-28

  • CSS中的導(dǎo)航欄和下拉菜單的實(shí)現(xiàn)

    這篇文章主要介紹了CSS中的導(dǎo)航欄和下拉菜單的實(shí)現(xiàn)的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-07-18

  • 純CSS實(shí)現(xiàn)的大型下拉菜單的示例代碼

    下拉菜單在很多網(wǎng)頁中都能應(yīng)用到，這篇文章主要介紹了純CSS實(shí)現(xiàn)的大型下拉菜單的示例代碼的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編
    2018-05-03

  • 純CSS實(shí)現(xiàn)下拉菜單的示例代碼

    這篇文章主要介紹了純CSS實(shí)現(xiàn)下拉菜單的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-01-09

  • 純css3制作鼠標(biāo)懸停波浪形狀彈性下拉菜單特效源碼

    純css3制作鼠標(biāo)懸停波浪形狀彈性下拉菜單特效源碼，當(dāng)鼠標(biāo)懸停波浪形菜單欄，彈出列表信息，鼠標(biāo)離開自動(dòng)收縮。效果非常逼真，本段代碼可以在各個(gè)網(wǎng)頁使用，有需要的朋友可
    2017-12-18

  • 純CSS+HTML大型下拉菜單特效

    這是一個(gè)使用HTML和純CSS代碼來制作的大型下拉菜單效果。適合用于欄目分類較多的網(wǎng)站使用，歡迎下載
    2017-10-26

  • HTML+CSS實(shí)現(xiàn)簡單下拉菜單效果

    使用Html+css實(shí)現(xiàn)簡單的下拉菜單代碼非常簡單，具有參考借鑒價(jià)值，需要的的朋友參考下吧
    2017-06-22

  • 利用純css做一個(gè)下拉菜單功能的示例代碼

    這篇文章主要介紹了利用純css做一個(gè)下拉菜單功能的示例代碼,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-09-01

最新評(píng)論