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

flex,简单丑陋的二级下拉菜单，

程序员文章站 2022-03-07 19:27:00
...
    

  1. <!DOCTYPE html>
    2. 

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

  3. <head>
    4. 

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

  5.   <title>Title</title>
    6. 

  6.   <style>
    7. 

  7.     * {
    8. 

  8.       padding: 0;
    9. 

  9.       margin: 0;
    10. 

  10.       text-decoration: none;
    11. 

  11.       list-style: none;
    12. 

  12.     }   body{
    13. 

  13.      background-color: #ccc;
    14. 

  14.    }
    15. 

  15.     .container{
    16. 

  16.           display: flex;
    17. 

  17.           background-color: #888888;
    18. 

  18.           text-align: center;
    19. 

  19.           justify-content: center;
    20. 

  20.           align-items: center;
    21. 

  21.     }
    22. 

  22.     .father{
    23. 

  23.       padding: 10px 25px;
    24. 

  24.       position: relative;
    25. 

  25.     }
    26. 

  26.     .son{
    27. 

  27.        position: absolute;
    28. 

  28.        background-color: #888888;
    29. 

  29.        top: 41px;
    30. 

  30.        left: 15px;
    31. 

  31.        padding: 5px;
    32. 

  32.       display: none;
    33. 

    34. 

  34.     }
    35. 

  35.     .son>li{
    36. 

    37. 

  37.       width: 60px;
    38. 

  38.       padding: 5px;
    39. 

  39.       font-size: 14px;
    40. 

  40.       /*display: none;*/
    41. 

  41.     }
    42. 

  42.     .son>li:hover{
    43. 

  43.        background-color: white;
    44. 

  44.       color: red;
    45. 

  45.     }
    46. 

  46.     .father:hover .son{
    47. 

  47.       display: block;
    48. 

  48.     }
    49. 

  49.   </style>
    50. 

  50. </head>
    51. 

  51. <body>
    52. 

    53. 

  53. <nav class="container">
    54. 

  54.   <li class="father"> 歌星大全
    55. 

  55.     <ul class="son">
    56. 

  56.       <li>周姐伦</li>
    57. 

  57.       <li>那英</li>
    58. 

  58.       <li>汪峰</li>
    59. 

  59.     </ul>
    60. 

  60.   </li>
    61. 

  61.   <li class="father"> 游戏大全
    62. 

  62.     <ul class="son">
    63. 

  63.       <li>拳皇97</li>
    64. 

  64.       <li>套熊猫</li>
    65. 

  65.       <li>接水管</li>
    66. 

  66.     </ul>
    67. 

  67.   </li>
    68. 

  68.   <li class="father"> 影视大全
    69. 

  69.     <ul class="son">
    70. 

  70.       <li>杀生</li>
    71. 

  71.       <li>那一夜</li>
    72. 

  72.       <li>封门村</li>
    73. 

  73.     </ul>
    74. 

  74.   </li>
    75. 

  75. </nav></body>
    76. 

  76. </html>
    77.

上一篇： php怎么生成随机数

下一篇： 如何开始学习cg素描？动漫cg素描学习教学！

推荐阅读