溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

如何利用CSS制作下拉菜單

發(fā)布時間：2021-08-10 18:11:38 來源：億速云 閱讀：120 作者：chen 欄目：web開發(fā)

本篇內(nèi)容介紹了“如何利用CSS制作下拉菜單”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

本文實例為大家分享了CSS下拉菜單的具體實現(xiàn)代碼，供大家參考，具體內(nèi)容如下

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <!DOCTYPE html>  

  2. <html>  

  3. <head>  

  4.   <title>下拉菜單實例|菜鳥教程(runoob.com)</title>  

  5.   <meta charset="utf-8">  

  6.   <style>  

  7.   .dropdown {   

  8.       position: relative;   

  9.       display: inline-block;   

  10.   }   

  11.   .dropdown-content {   

  12.       display: none;   

  13.       position: absolute;   

  14.       background-color: #f9f9f9;   

  15.       min-width: 160px;   

  16.       box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);   

  17.       padding: 12px 16px;   

  18.   }   

  19.   .dropdown:hover .dropdown-content {   

  20.       display: block;   

  21.   }   

  22.   </style>  

  23. </head>  

  24. <body>  

  25. <h3>鼠標移動后出現(xiàn)下拉菜單</h3>  

  26. <p>將鼠標移動到指定元素上就能看到下拉菜單。</p>  

  27. <div class="dropdown">  

  28.   <span>鼠標移動到我這！</span>  

  29.   <div class="dropdown-content">  

  30.     <p>菜鳥教程</p>  

  31.     <p>www.runoob.com</p>  

  32.   </div>  

  33. </div>  

  34. </body>  

  35. </html>   

如何利用CSS制作下拉菜單

“如何利用CSS制作下拉菜單”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手