example.html 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style>
  7. * {
  8. margin: 0;
  9. padding: 0;
  10. }
  11. .menu {
  12. margin: 20px 50px;
  13. }
  14. .menu li {
  15. list-style: none;
  16. width: 120px;
  17. height: 35px;
  18. line-height: 35px;
  19. color: white;
  20. text-align: center;
  21. border-bottom: 1px solid lightgray;
  22. }
  23. .menu>li {
  24. background-color: #8FBC8F;
  25. overflow: hidden;
  26. }
  27. .menu>li:hover {
  28. height: auto;
  29. }
  30. .menu li ul li {
  31. background-color: lightsteelblue;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <ul class="menu">
  37. <li>
  38. Menu 1
  39. <ul>
  40. <li>Menu 1-1</li>
  41. <li>Menu 1-2</li>
  42. <li>Menu 1-3</li>
  43. </ul>
  44. </li>
  45. <li>
  46. Menu 2
  47. <ul>
  48. <li>Menu 2-1</li>
  49. <li>Menu 2-2</li>
  50. </ul>
  51. </li>
  52. <li>
  53. Menu 3
  54. <ul>
  55. <li>Menu 3-1</li>
  56. <li>Menu 3-2</li>
  57. <li>Menu 3-3</li>
  58. <li>Menu 3-4</li>
  59. <li>Menu 3-5</li>
  60. </ul>
  61. </li>
  62. <li>
  63. Menu 4
  64. <ul>
  65. <li>Menu 4-1</li>
  66. <li>Menu 4-2</li>
  67. </ul>
  68. </li>
  69. <li>
  70. Menu 5
  71. <ul>
  72. <li>Menu 5-1</li>
  73. <li>Menu 5-2</li>
  74. <li>Menu 5-3</li>
  75. <li>Menu 5-4</li>
  76. </ul>
  77. </li>
  78. </ul>
  79. </body>
  80. </html>