建站
咨詢
售后
建站咨詢
新聞中心
CSS 下拉菜單
使用 CSS 創(chuàng)建一個鼠標(biāo)移動上去后顯示下拉菜單的效果。
臨夏州網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)從2013年開始到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。
基本下拉菜單
當(dāng)鼠標(biāo)移動到指定元素上時，會出現(xiàn)下拉菜單。
實例
嘗試一下 ?
實例解析
HTML 部分：
我們可以使用任何的 HTML元素來打開下拉菜單，如：, 或 a
使用容器元素 (如：
使用
CSS 部分：
.dropdown 類使用 position:relative, 這將設(shè)置下拉菜單的內(nèi)容放置在下拉按鈕 (使用 position:absolute) 的右下角位置。
.dropdown-content 類中是實際的下拉菜單。默認(rèn)是隱藏的，在鼠標(biāo)移動到指定元素后會顯示。 注意 min-width 的值設(shè)置為 160px。你可以隨意修改它。 注意: 如果你想設(shè)置下拉內(nèi)容與下拉按鈕的寬度一致，可設(shè)置 width 為 100% ( overflow:auto 設(shè)置可以在小尺寸屏幕上滾動)。
我們使用 box-shadow 屬性讓下拉菜單看起來像一個"卡片"。
:hover 選擇器用于在用戶將鼠標(biāo)移動到下拉按鈕上時顯示下拉菜單。
下拉菜單
創(chuàng)建下拉菜單，并允許用戶選取列表中的某一項：
這個實例類似前面的實例，當(dāng)我們在下拉列表中添加了鏈接，并設(shè)置了樣式：
實例
嘗試一下 ?
下拉內(nèi)容對齊方式
float:left;
float:right;
實例
.dropdown-content {
right:
0; }
嘗試一下 ?
更多實例
圖片下拉
該實例演示了如何如何在下拉菜單中添加圖片。
導(dǎo)航條下拉
該實例演示了如何在導(dǎo)航條上添加下拉菜單。
網(wǎng)站標(biāo)題：創(chuàng)新互聯(lián)CSS教程：CSS下拉菜單
本文來源：http://www.dlmjj.cn/article/cdjipeh.html
