欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

带有二级分类的导航

程序员文章站 2023-12-21 17:51:58
...
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

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

  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. 

  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. 

  7. <title>带有二级分类的导航</title>
    8. 

  8. <style>
    9. 

  9. body,ul,li{
    10. 

  10. padding: 0px;
    11. 

  11. margin: 0px;
    12. 

  12. }
    13. 

    14. 

  14. body{
    15. 

  15. background:lightgray;
    16. 

  16. }
    17. 

    18. 

  18. li{
    19. 

  19. list-style: none;
    20. 

  20. }
    21. 

    22. 

  22. nav,nav>ul{
    23. 

  23. background: rgb(117, 228, 218);
    24. 

  24. width: auto;
    25. 

  25. margin: 0px auto;
    26. 

  26. }
    27. 

    28. 

  28. nav>ul{
    29. 

  29. display: flex;
    30. 

  30. justify-content: center;
    31. 

  31. }
    32. 

  32. nav>ul>li{
    33. 

  33.         position: relative;
    34. 

  34.         padding: 10px 10px;
    35. 

  35.     }
    36. 

  36.     nav>ul>li:hover{
    37. 

  37.         background: rgb(0, 206, 206);
    38. 

  38.     }
    39. 

  39.     nav>ul>li>ul>li:hover{
    40. 

  40.         background: rgb(0, 206, 206);
    41. 

  41.     }
    42. 

  42.     nav>ul>li>ul{
    43. 

  43.         position: absolute;
    44. 

  44.         background: rgb(25, 127, 145);
    45. 

  45.         left:0px;
    46. 

  46.         top:40px;
    47. 

  47.         display: none;
    48. 

  48.     }
    49. 

  49.     nav>ul>li>ul>li{
    50. 

  50.         padding: 10px 10px;
    51. 

  51.     }
    52. 

  52.     nav>ul>li:hover>ul{
    53. 

  53.         display: block;
    54. 

  54.     }
    55. 

  55. </style>
    56. 

  56. </head>
    57. 

    58. 

  58. <body>
    59. 

  59. <nav class="nav">
    60. 

  60. <ul class="ul">
    61. 

  61. <li class="li">网站首页</li>
    62. 

  62. <li class="li">魔幻/科幻
    63. 

  63. <ul class="ul">
    64. 

  64. <li class="li">沙丘2021</li>
    65. 

  65. <li class="li">无名者的攻击</li>
    66. 

  66. <li class="li">人类清除计划</li>
    67. 

  67. </ul>
    68. 

  68. </li>
    69. 

  69. <li class="li">犯罪/历史
    70. 

  70. <ul class="ul">
    71. 

  71. <li class="li">王牌特工</li>
    72. 

  72. <li class="li">西比勒</li>
    73. 

  73. <li class="li">美国刺客</li>
    74. 

  74. </ul>
    75. 

  75. </li>
    76. 

  76. <li class="li">动漫/卡通
    77. 

  77. <ul class="ul">
    78. 

  78. <li class="li">开心汉堡店</li>
    79. 

  79. <li class="li">猫和老鼠</li>
    80. 

  80. <li class="li">泰坦</li>
    81. 

  81. </ul>
    82. 

  82. </li>
    83. 

  83. <li class="li">欧美/电影
    84. 

  84. <ul class="ul">
    85. 

  85. <li class="li">爱情生活</li>
    86. 

  86. <li class="li">格洛丽亚</li>
    87. 

  87. <li class="li">作秀公审</li>
    88. 

  88. </ul>
    89. 

  89. </li>
    90. 

  90. </ul>
    91. 

  91. </nav>
    92. 

  92. </body>
    93. 

  93. </html>
    94.

带有二级分类的导航

上一篇：

下一篇：

推荐阅读