怎么用純CSS實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)后出現(xiàn)下拉菜單

這篇文章主要介紹了怎么用純CSS實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)后出現(xiàn)下拉菜單，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

　　HTML部分：

　　1、我們可以使用任何的HTML元素來(lái)打開(kāi)下拉菜單，如：<span>或a<button>元素

　　2、使用容器元素(例如<div>)來(lái)創(chuàng)建下拉菜單的內(nèi)容，并放在任何你想放的位置上。

　　3、使用<div>元素來(lái)包裹這些元素，并使用CSS來(lái)設(shè)置下拉內(nèi)容的樣式。

　　CSS部分：

　　1、.dropdown使用position:relative,這將設(shè)置下拉菜單的內(nèi)容放置在下拉按鈕(使用position:absolute)的右下角位置。

　　2、.dropdown-content中是實(shí)際的下拉菜單。默認(rèn)是隱藏的，在鼠標(biāo)移動(dòng)到指定元素后會(huì)顯示。注意:如果你想設(shè)置下拉內(nèi)容與下拉按鈕的寬度一致，可設(shè)置width為100%。

　　3、:hover選擇器用于將鼠標(biāo)移動(dòng)到下拉按鈕上時(shí)顯示下拉菜單。

　　實(shí)例：用純CSS做一個(gè)導(dǎo)航下拉菜單，當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí)出現(xiàn)下拉菜單

　　HTML代碼：

　　<p>純CSS實(shí)現(xiàn)鼠標(biāo)移動(dòng)到按鈕上打開(kāi)下拉菜單。</p>

　　<divclass="dropdown">

　　<buttonclass="dropbtn">下拉菜單</button>

　　<divclass="dropdown-content">

　　<ahref="#">菜單1</a>

　　<ahref="#">菜單2</a>

　　<ahref="#">菜單3</a>

　　</div>

　　</div>

　　CSS部分：

　　.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;

　　width:100%;;

　　box-shadow:0px8px16px0pxrgba(0,0,0,0.2);

　　}

　　.dropdown-contenta{

　　color:black;

　　padding:12px16px;

　　text-decoration:none;

　　display:block;

　　}

　　.dropdown-contenta:hover{

　　background-color:#f1f1f1

　　}

　　.dropdown:hover.dropdown-content{

　　display:block;

　　}

　　.dropdown:hover.dropbtn{

　　background-color:#3e8e41;

　　}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“怎么用純CSS實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)后出現(xiàn)下拉菜單”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!