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