温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css如何制作黑色经典导航下拉菜单

发布时间:2021-07-02 11:21:41 来源:亿速云 阅读:149 作者:小新 栏目:web开发

小编给大家分享一下css如何制作黑色经典导航下拉菜单,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

具体内容如下

XML/HTML Code复制内容到剪贴板

  1. <!DOCTYPE html>  

  2. <html>  

  3. <head>  

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

  5.     <title>导航栏下拉菜单</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">产品展示</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如何制作黑色经典导航下拉菜单

看完了这篇文章,相信你对“css如何制作黑色经典导航下拉菜单”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI