小編給大家分享一下html如何實現(xiàn)下拉菜單，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司專注于子洲企業(yè)網(wǎng)站建設,成都響應式網(wǎng)站建設,商城網(wǎng)站制作。子洲網(wǎng)站建設公司,為子洲等地區(qū)提供建站服務。全流程按需策劃，專業(yè)設計，全程項目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務

元素來包裹這些元素，并使用 CSS 來設置下拉內(nèi)容的樣式。

CSS 部分：

。dropdown?類使用？position:relative, 這將設置下拉菜單的內(nèi)容放置在下拉按鈕 （使用？position:absolute） 的右下角位置。

。dropdown-content?類中是實際的下拉菜單。默認是隱藏的，在鼠標移動到指定元素后會顯示。 注意？min-width?的值設置為 160px。你可以隨意修改它。？注意：?如果你想設置下拉內(nèi)容與下拉按鈕的寬度一致，可設置？width?為 100% （？overflow:auto設置可以在小尺寸屏幕上滾動）。

我們使用？box-shadow?屬性讓下拉菜單看起來像一個"卡片"。

：hover?選擇器用于在用戶將鼠標移動到下拉按鈕上時顯示下拉菜單。

下拉菜單

創(chuàng)建下拉菜單，并允許用戶選取列表中的某一項：

下拉菜單

這個實例類似前面的實例，當我們在下拉列表中添加了鏈接，并設置了樣式：

實例

。dropbtn {

background-color:#4CAF50;

color:white;

padding:16px;

font-size:16px;

border:none;

cursor:pointer;

}

。dropdown{

position:relative;

display:inline-block;

}

。dropdown-content{

display:none;

position:absolute;

background-color:#f9f9f9;

min-width:160px;

box-shadow:0px 8px 16px 0px rgba（0,0,0,0.2）;

}

。dropdown-content a{

color:black;

padding:12px 16px;

text-decoration:none;

display:block;

}

。dropdown-content a:hover{background-color:#f1f1f1}

。dropdown:hover .dropdown-content{

display:block;

}

。dropdown:hover .dropbtn{

background-color:#3e8e41;

}

下拉內(nèi)容對齊方式

float:left;

左

float:right;

右

如果你想設置右浮動的下拉菜單內(nèi)容方向是從右到左，而不是從左到右，可以添加以下代碼？right: 0;

實例

。dropdown-content{

right:0;

}

以上是“html如何實現(xiàn)下拉菜單”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章名稱：html如何實現(xiàn)下拉菜單
轉載來源：http://www.rwnh.cn/article26/jdgejg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設計公司、、網(wǎng)站策劃、做網(wǎng)站、微信小程序、域名注冊

廣告

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