如何利用純css做一個下拉菜單功能

這篇“如何利用純css做一個下拉菜單功能”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“如何利用純css做一個下拉菜單功能”，給大家總結(jié)了以下內(nèi)容，具有一定借鑒價值，內(nèi)容詳細(xì)步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望大家通過這篇文章有所收獲，下面讓我們一起來看看具體內(nèi)容吧。

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

直接上效果圖。

1，一個按鈕，沒點(diǎn)擊前（手機(jī)端）或者鼠標(biāo)沒指向時（pc端）

如何利用純css做一個下拉菜單功能

2，點(diǎn)擊后，或者鼠標(biāo)指向后。

如何利用純css做一個下拉菜單功能

就能夠顯示下拉菜單，而且它的實(shí)現(xiàn)原理也很簡單，只需要記住一點(diǎn):hover，這個屬性就行了。

我們直接上代碼，稍后再來解釋

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        li{
            list-style: none;
            height: 28px;
        }
        #menu{
            display: inline-block;
        }
        #menu #list {
            max-height: 0;
            transition: max-height 0.25s ease-out;
            overflow: hidden;
            background: #f5f4f4;
            width: 80px;
            margin: 0;
            padding: 0;
            text-align: center;
        }
        #menu:hover #list {
            max-height: 200px;
            transition: max-height 0.25s ease-in;
            width: 80px;
            margin: 0;
            padding: 0;
        }
        .button{
	          height: 32px;
	          width: 80px;
	          margin-top: 6px;
	          border-radius: 4px;
	          color: #fff;
	          padding-left: 0;
	          padding-right: 0;
	          line-height: 32px;
	          background: #E33E33;
	          text-align: center;
        }
    </style>
</head>
<body>
  <div id="menu">
    <div class="button">更多信息</div>
    <ul id="list">
        <li>個人中心</li>
        <li>我的博客</li>
        <li>設(shè)置</li>
        <li>退出登陸</li>
        <li>注銷</li>
    </ul>
  </div>
</body>
</html>

只需要設(shè)置一個div，然后給他設(shè)置兩種狀態(tài)，一種是沒有:hover，一種是有:hover。并且在沒有:hover的時候設(shè)置菜單隱藏就可以了（overflow: hidden;），其余的代碼都是簡單的盒子模型。

現(xiàn)在再來說一說:hover，這個東西是什么，它是一個css選擇器，選擇器用于選擇鼠標(biāo)指針浮動在上面的元素。所以說當(dāng)鼠標(biāo)懸浮或者手機(jī)端點(diǎn)擊的時候，就會觸發(fā)這個屬性，就能夠讓這個下拉菜單顯示出來了。同時我們加上了transition屬性，讓下拉菜單有漸變的效果，更加感覺時下拉下來的。

所以說css選擇器是不是很神奇，用的好的話，就不用寫一大坨js代碼。我將會在后續(xù)把css選擇器做成一個專欄，到時候在系統(tǒng)的介紹所有的css選擇器。

感謝你的閱讀，希望你對“如何利用純css做一個下拉菜單功能”這一關(guān)鍵問題有了一定的理解，具體使用情況還需要大家自己動手實(shí)驗(yàn)使用過才能領(lǐng)會，快去試試吧，如果想閱讀更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞標(biāo)題：如何利用純css做一個下拉菜單功能
新聞來源：http://aaarwkj.com/article12/ihhcdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、微信公眾號、網(wǎng)站收錄、品牌網(wǎng)站制作、標(biāo)簽優(yōu)化、手機(jī)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

如何利用純css做一個下拉菜單功能