溫馨提示×

溫馨提示×

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

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

css如何制作黑色經(jīng)典導(dǎo)航下拉菜單

發(fā)布時間：2021-07-02 11:21:41 來源：億速云 閱讀：173 作者：小新 欄目：web開發(fā)

小編給大家分享一下css如何制作黑色經(jīng)典導(dǎo)航下拉菜單，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

具體內(nèi)容如下

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

  1. <!DOCTYPE html>  

  2. <html>  

  3. <head>  

  4.     <meta charset="UTF-8">  

  5.     <title>導(dǎo)航欄下拉菜單</title>  

  6. <style>  

  7. *{margin:0;padding:0;}   

  8. ul{   

  9.     list-style-type:none;   

  10.     background-color:#333;   

  11.     overflow:hidden;   

  12. }   

  13. li{   

  14.     float:left;   

  15. }   

  16. li a, .dropbtn{   

  17.     display:inline-block;   

  18.     color:white;   

  19.     text-align:center;   

  20.     padding:14px 16px;   

  21.     text-decoration:none;   

  22. }   

  23.   

  24. li a:hover, .dropdown:hover .dropbtn{   

  25.     background-color:#111;   

  26. }   

  27.   

  28. .dropdown{   

  29.     display:inline-block;   

  30. }   

  31.   

  32. .dropdown-content{   

  33.     min-width:200px;   

  34.     background-color:#F9F9F9;   

  35.     position:absolute;   

  36.     display:none;   

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

  38. }   

  39.   

  40. .dropdown-content a{   

  41.     color:black;   

  42.     padding:12px 16px;   

  43.     text-decoration:none;   

  44.     display:block;   

  45. }   

  46.   

  47. .dropdown-content a:hover{   

  48.     background-color:#F1F1F1;   

  49. }   

  50.   

  51. .dropdown:hover .dropdown-content{   

  52.     display: block;   

  53. }   

  54. </style>  

  55. </head>  

  56. <body>  

  57. <ul>  

  58.     <li><a href="#shop" class="active">在線商城</a></li>  

  59.     <li><a href="#news">產(chǎn)品展示</a></li>  

  60.     <div class="dropdown">  

  61.         <a href="#" class="dropbtn">下拉菜單</a>  

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

  63.             <a href="#">子菜單 1</a>  

  64.             <a href="#">子菜單 2</a>  

  65.             <a href="#">子菜單 3</a>  

  66.         </div>  

  67.     </div>  

  68. </ul>  

  69. </body>  

  70. </html>  

在 Chrome 中當鼠標移入下拉按鈕時顯示如下：

css如何制作黑色經(jīng)典導(dǎo)航下拉菜單

看完了這篇文章，相信你對“css如何制作黑色經(jīng)典導(dǎo)航下拉菜單”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向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
助
手