CSS下拉菜單簡(jiǎn)單制作教程
發(fā)布時(shí)間:2016-07-05 14:40:41 作者:佚名
我要評(píng)論

這篇文章主要為大家詳細(xì)介紹了CSS下拉菜單簡(jiǎn)單制作教程,鼠標(biāo)移動(dòng)到指定元素上會(huì)出現(xiàn)下拉菜單,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了CSS下拉菜單的具體實(shí)現(xiàn)代碼,供大家參考,具體內(nèi)容如下
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE html>
- <html>
- <head>
- <title>下拉菜單實(shí)例|菜鳥教程(runoob.com)</title>
- <meta charset="utf-8">
- <style>
- .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);
- padding: 12px 16px;
- }
- .dropdown:hover .dropdown-content {
- display: block;
- }
- </style>
- </head>
- <body>
- <h2>鼠標(biāo)移動(dòng)后出現(xiàn)下拉菜單</h2>
- <p>將鼠標(biāo)移動(dòng)到指定元素上就能看到下拉菜單。</p>
- <div class="dropdown">
- <span>鼠標(biāo)移動(dòng)到我這!</span>
- <div class="dropdown-content">
- <p>菜鳥教程</p>
- <p>www.runoob.com</p>
- </div>
- </div>
- </body>
- </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
- 這篇文章主要介紹了純CSS實(shí)現(xiàn)下拉菜單的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-01-09
- 使用css3制作的下拉菜單外觀非常漂亮,在各大網(wǎng)站都適用,今天小編通過本文給大家分享基于css3制作的動(dòng)畫下拉菜單效果,需要的的朋友參考下吧2017-04-12
- 本篇文章主要介紹了CSS導(dǎo)航欄及彈窗示例代碼,導(dǎo)航欄和彈窗是在web中應(yīng)用很廣泛的,非常具有實(shí)用價(jià)值,需要的朋友可以參考下。2017-01-10
- 這篇文章主要為大家詳細(xì)介紹了css制作黑色經(jīng)典導(dǎo)航下拉菜單的相關(guān)代碼,大氣簡(jiǎn)單,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-03-15
- 這篇文章主要介紹了你值得擁有的多種CSS下拉菜單效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-03-14
基于CSS實(shí)現(xiàn)的4級(jí)下拉菜單效果代碼
這篇文章主要為大家介紹了基于CSS實(shí)現(xiàn)的4級(jí)下拉菜單效果代碼,基于css通過對(duì)頁(yè)面元素樣式的設(shè)置實(shí)現(xiàn)四級(jí)下拉菜單的效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-17- 這篇文章主要為大家介紹了CSS實(shí)現(xiàn)的灰色下拉菜單效果代碼,涉及css控制hover樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-14
- 下拉菜單在很多網(wǎng)頁(yè)中都能應(yīng)用到,這篇文章主要介紹了純CSS實(shí)現(xiàn)的大型下拉菜單的示例代碼的相關(guān)資料,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編2018-05-03