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