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

成熟不是心变老,而是眼泪在眼里打转却还持续微笑。积极的人在每一次忧患中都是看到一个机会,而消极的人则是在每个机会都是会看到某种忧患。

本文分享的例子,在导航栏菜单中添加下拉菜单,分享给大家供大家参考,具体内容如下

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <metacharset="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. lia,.dropbtn{
  17. display:inline-block;
  18. color:white;
  19. text-align:center;
  20. padding:14px16px;
  21. text-decoration:none;
  22. }
  23. lia:hover,.dropdown:hover.dropbtn{
  24. background-color:#111;
  25. }
  26. .dropdown{
  27. display:inline-block;
  28. }
  29. .dropdown-content{
  30. min-width:200px;
  31. background-color:#F9F9F9;
  32. position:absolute;
  33. display:none;
  34. box-shadow:0px8px15px0pxrgba(0,0,0,0.2);
  35. }
  36. .dropdown-contenta{
  37. color:black;
  38. padding:12px16px;
  39. text-decoration:none;
  40. display:block;
  41. }
  42. .dropdown-contenta:hover{
  43. background-color:#F1F1F1;
  44. }
  45. .dropdown:hover.dropdown-content{
  46. display:block;
  47. }
  48. </style>
  49. </head>
  50. <body>
  51. <ul>
  52. <li><arel="nofollow noopener noreferrer" href="#shop"class="active">在线商城</a></li>
  53. <li><arel="nofollow noopener noreferrer" href="#news">产品展示</a></li>
  54. <divclass="dropdown">
  55. <arel="nofollow noopener noreferrer" href="#"class="dropbtn">下拉菜单</a>
  56. <divclass="dropdown-content">
  57. <arel="nofollow noopener noreferrer" href="#">子菜单1</a>
  58. <arel="nofollow noopener noreferrer" href="#">子菜单2</a>
  59. <arel="nofollow noopener noreferrer" href="#">子菜单3</a>
  60. </div>
  61. </div>
  62. </ul>
  63. </body>
  64. </html>

在 Chrome 中当鼠标移入下拉按钮时显示如下:

以上就是本文的全部内容,希望对大家的学习有所帮助。

原文:http://www.cnblogs.com/Mtime/p/5265793.html

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案

Flex布局史上最简单使用语法教程

新的CSS 伪类函数 :is() 和 :where()示例详解

纯CSS打字动画的如何实现示例

CSS浮动引起的高度塌陷问题