CSS下拉菜單效果代碼分享
本篇內(nèi)容主要講解“CSS下拉菜單效果代碼分享”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“CSS下拉菜單效果代碼分享”吧!
成都創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的龍華網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
使用 CSS 可以創(chuàng)建一個(gè)鼠標(biāo)移入后顯示下拉菜單的效果。
1、下拉菜單的實(shí)現(xiàn)
當(dāng)鼠標(biāo)移入指定元素時(shí)，顯示下拉菜單。代碼如下：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
簡單的下拉菜單 鼠標(biāo)你過來，我為你展示下拉菜單。
下拉菜單 1
下拉菜單 2
實(shí)例解析：
HTML 部分：
可以使用任何 HTML 元素來打開下拉菜單，比如 ，或 、
然后，使用
最后，再使用
CSS 部分：
.dropdown 類使用 position:relative，這將設(shè)置下拉菜單的內(nèi)容放置在下拉按鈕（使用 position:absolute）的右下角位置。
.dropdown-content 類中是實(shí)際的下拉菜單。默認(rèn)是隱藏的，在鼠標(biāo)移入指定元素后顯示。
注意：在上面的例子中，下拉菜單容器的寬度設(shè)置為最小 200px，根據(jù)實(shí)際情況可以自行定義。
如果希望下拉菜單與下拉按鈕的寬度一致，可將寬度設(shè)置為 100%，overflow:auto 屬性可以指定在小尺寸屏幕上滾動(dòng)。
:hover 選擇器用于在用戶將鼠標(biāo)移動(dòng)到下拉按鈕上時(shí)顯示下拉菜單，將下拉菜單容器設(shè)置為 display:block;
2、創(chuàng)建下拉菜單
在上面例子的基礎(chǔ)上，創(chuàng)建一個(gè)下拉菜單，并允許用戶選取列表中的某一項(xiàng)目。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
下拉菜單實(shí)例
在 Chrome 中當(dāng)鼠標(biāo)移入下拉菜單按鈕時(shí)顯示如下：
在上面的例子中，下拉菜單的內(nèi)容設(shè)置了 box-shadow 屬性，這個(gè)屬性主要用于添加陰影，這樣下拉菜單看起來就像一個(gè)“卡片”一樣。該屬性指定下拉菜單在水平方向陰影為 0，垂直方向?yàn)?8 像素的陰影，模糊距離為 15 像素，陰影的尺寸為 0，并指定陰影的顏色為黑色，且透明度為 0.2。
下拉菜單按鈕使用了 cursor 屬性，該屬性主要用于指定鼠標(biāo)光標(biāo)的類型，即鼠標(biāo)指針放在一個(gè)元素邊界范圍內(nèi)時(shí)所用的光標(biāo)形狀。
下表列出了該屬性所有的值： 鼠標(biāo)可移入對應(yīng)的屬性值，查看光標(biāo)的形狀。
3、下拉菜單的對齊方式
如果下拉菜單設(shè)置了 float:left 樣式，那么還需要設(shè)置 left:0，即從 left:0 處開始從左向右顯示菜單內(nèi)容，否則會超出瀏覽器左邊窗口。
如果下拉菜單設(shè)置了 float:right 樣式，默認(rèn)都是從左向右顯示，菜單內(nèi)容則會超出瀏覽器右邊窗口，所以還需要設(shè)置 right:0，讓下拉菜單內(nèi)容從右向左。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
下拉菜單對齊
