css下拉菜單功能如何實(shí)現(xiàn)

這篇文章將為大家詳細(xì)講解有關(guān)css下拉菜單功能如何實(shí)現(xiàn)，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

專注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)義馬免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了成百上千企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

HTML代碼：


    水果
    
        蘋果
        香蕉
        草莓
    


    甜點(diǎn)
    
        蛋糕
        曲奇
        面包
    


    奶茶
    
        紅豆奶茶
        珍珠奶茶
        全套奶茶

CSS代碼：

 *{
            padding: 0;
            margin: 0;
        }
        ul,a{
            font-size: 20px;
            list-style: none;
            text-decoration: none;
            background-color: #3C3C3C;
            color: #FFFFFF;
            width: 100px;
            text-align: center;
            border: 0px solid black;
            border-radius: 5px;
            margin-top: 1px;
        }
        a{
            display: block;
        }

        .plat{
            display: none;
        }
        .nav{
             float: left;
             margin-left: 1px;
         }
        .nav:hover .plat{
            display: block;
            clear: both;
        }
        .plat li:hover>a{
            background-color: dimgrey;
        }

運(yùn)行的效果如下：當(dāng)鼠標(biāo)放在下拉按鈕上就會(huì)出現(xiàn)下拉菜單。

css下拉菜單功能如何實(shí)現(xiàn)

關(guān)于css下拉菜單功能如何實(shí)現(xiàn)就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

當(dāng)前題目：css下拉菜單功能如何實(shí)現(xiàn)
網(wǎng)址分享：http://m.jiaotiyi.com/article/psseip.html

網(wǎng)站建設(shè)知識(shí)

css下拉菜單功能如何實(shí)現(xiàn)

其他資訊