使用CSS动画在鼠标悬停时将子类别居中下拉。

huangapple
go评论120阅读模式
英文:

Center dropdown sub-categories on hovering with css animation

问题

在向我的导航栏添加CSS动画效果之前，一切都是居中的，工作得很完美，但现在有了动画，当悬停在主分类上时，子分类不再居中显示在中间。

我尝试使用以下样式：

  1. text-align: center;
  2. margin: 0 auto;
  3. left: 50%;
  4. transform: translateX(-50%);

但似乎没有起作用。

此外，我还在这里创建了一个 Codepen，以查看它的工作方式并进行实验：Codepen链接

有没有办法在悬停主分类时将子分类居中显示？

英文:

Before I added a CSS animation effect to my navbar, everything was centered and working perfect, but now with the animation, when hovering the main-categories, the sub-categories are no longer displayed centered in the middle.

I tried using

  1. text-align:center, margin:0 auto, left:50% and transform:translatex(-50%);

but nothing seems to work

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. body, html {
  2.   margin: 0;
  3.   padding: 0;
  4.   border: 0;
  5.   outline: 0;
  6.   box-sizing: border-box;
  7.   text-align: center;
  8.   width: 100%;
  9.   height: 100%;
  10. }
  11. body {
  12.   background-color: #FFFFFF;
  13.   font-family: &#39;IBM Plex Serif&#39;, serif;
  14.   font-size: 16px;
  15.   font-weight: 400;
  16.   color: #121212;
  17. }
  18. a {
  19.   color: #121212;
  20.   text-decoration: none;
  21. }
  22. a:hover {
  23.   color: #E5633F;
  24. }
  25. nav {
  26.   grid-area: navi;
  27.   display: block;
  28.   text-align: center;
  29.   border-bottom: 3px solid #121212;
  30.   background-color: inherit;
  31. }
  32. nav {
  33.   position: -webkit-sticky;
  34.   position: sticky;
  35.   top: 0;
  36.   cursor: pointer;
  37.   z-index: 8;
  38.   width: 100%;
  39. }
  40. main-categories {
  41.   position: relative;
  42.   display: inline-block;
  43.   background-color: inherit;
  44.   text-transform: uppercase;
  45.   height: 42px;
  46.   line-height: 42px;
  47.   text-align: center;
  48.   padding: 0px 22px 0px 22px;
  49. }
  50. main-categories:hover {
  51.   color: #E5633F;
  52. }
  53. main-categories a {
  54.   position: relative;
  55.   text-decoration: none;
  56. }   
  57. main-categories a:hover {
  58.   color: #E5633F;
  59. }
  60. main-categories a:before{
  61.   content: &#39;▪ &#39;;
  62. }
  63. sub-categories {
  64.   display: none;
  65.   position: absolute;
  66.   width: auto;
  67.   left: 50%;
  68.   transform: translatex(-50%);
  69.   text-align: center;
  70.   white-space: nowrap;
  71.   background-color: inherit;
  72. }
  73. sub-categories a {
  74.   display: block;
  75.   font-size: 15px;
  76.   padding: 0 36px 0 36px;
  77.   text-transform: capitalize;
  78.   text-decoration: none;
  79.   height: 36px;
  80.   line-height: 36px;
  81.   border-left: 1px solid #121212;
  82.   border-right: 1px solid #121212;
  83.   border-bottom: 1px solid #121212;
  84. }   
  85. sub-categories a:hover {
  86.   color: #FFFFFF;
  87.   background-color: #121212;
  88. }
  89. main-categories:hover sub-categories {
  90.   display: block;
  91. }
  92. sub-categories a:before{
  93.   content: &#39;&#39;;
  94. }
  95. sub-categories {
  96.   animation: rotateMenu 400ms ease-in-out forwards;
  97.   transform-origin: top center;
  98. }
  100. @keyframes rotateMenu {
  101.   0% {
  102.     transform: rotateX(-90deg)
  103.   }
  104.   70% {
  105.     transform: rotateX(20deg) 
  106.   }
  107.   100% {
  108.     transform: rotateX(0deg) 
  109.   }
  110. }

<!-- language: lang-html -->

  1. &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot;&gt;
  2. &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin&gt;
  3. &lt;link href=&quot;https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@300;400;500&amp;family=Playfair+Display:wght@400;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
  5. &lt;nav class=&quot;menu&quot;&gt; 
  6.   &lt;!-- 1. --&gt;
  7.   &lt;main-categories&gt;
  8.     &lt;a href=&quot;#void&quot;&gt;News&lt;/a&gt;
  9.     &lt;sub-categories&gt;
  10.     &lt;a href=&quot;#&quot;&gt;Europe&lt;/a&gt;
  11.     &lt;a href=&quot;#&quot;&gt;Asia&lt;/a&gt;
  12.     &lt;a href=&quot;#&quot;&gt;Africa&lt;/a&gt;
  13.     &lt;a href=&quot;#&quot;&gt;Oceania&lt;/a&gt;
  14.     &lt;a href=&quot;#&quot;&gt;North America&lt;/a&gt;
  15.     &lt;a href=&quot;#&quot;&gt;South America&lt;/a&gt;
  16.     &lt;/sub-categories&gt;
  17.   &lt;/main-categories&gt;
  18. 	
  19.   &lt;!-- 2. --&gt;
  20.   &lt;main-categories&gt;
  21.     &lt;a href=&quot;#void&quot;&gt;Politics&lt;/a&gt;
  22.     &lt;sub-categories&gt;
  23.       &lt;a href=&quot;#&quot;&gt;Europe&lt;/a&gt;
  24.       &lt;a href=&quot;#&quot;&gt;Asia&lt;/a&gt;
  25.       &lt;a href=&quot;#&quot;&gt;Africa&lt;/a&gt;
  26.       &lt;a href=&quot;#&quot;&gt;Oceania&lt;/a&gt;
  27.       &lt;a href=&quot;#&quot;&gt;North America&lt;/a&gt;
  28.       &lt;a href=&quot;#&quot;&gt;South America&lt;/a&gt;
  29.     &lt;/sub-categories&gt;
  30.   &lt;/main-categories&gt;
  32.   &lt;!-- 3. --&gt;
  33.   &lt;main-categories&gt;
  34.     &lt;a href=&quot;#void&quot;&gt;Economy&lt;/a&gt;
  35.     &lt;sub-categories&gt;
  36.       &lt;a href=&quot;#&quot;&gt;Europe&lt;/a&gt;
  37.       &lt;a href=&quot;#&quot;&gt;Asia&lt;/a&gt;
  38.       &lt;a href=&quot;#&quot;&gt;Africa&lt;/a&gt;
  39.       &lt;a href=&quot;#&quot;&gt;Oceania&lt;/a&gt;
  40.       &lt;a href=&quot;#&quot;&gt;North America&lt;/a&gt;
  41.       &lt;a href=&quot;#&quot;&gt;South America&lt;/a&gt;
  42.     &lt;/sub-categories&gt;
  43.   &lt;/main-categories&gt;
  45.   &lt;!-- 4. --&gt;
  46.   &lt;main-categories&gt;
  47.     &lt;a href=&quot;#void&quot;&gt;Health&lt;/a&gt;
  48.     &lt;sub-categories&gt;
  49.       &lt;a href=&quot;#&quot;&gt;Europe&lt;/a&gt;
  50.       &lt;a href=&quot;#&quot;&gt;Asia&lt;/a&gt;
  51.       &lt;a href=&quot;#&quot;&gt;Africa&lt;/a&gt;
  52.       &lt;a href=&quot;#&quot;&gt;Oceania&lt;/a&gt;
  53.       &lt;a href=&quot;#&quot;&gt;North America&lt;/a&gt;
  54.       &lt;a href=&quot;#&quot;&gt;South America&lt;/a&gt;
  55.     &lt;/sub-categories&gt;
  56.   &lt;/main-categories&gt;
  58.   &lt;!-- 5. --&gt;
  59.   &lt;main-categories&gt;
  60.     &lt;a href=&quot;#void&quot;&gt;Education&lt;/a&gt;
  61.     &lt;sub-categories&gt;
  62.       &lt;a href=&quot;#&quot;&gt;Europe&lt;/a&gt;
  63.       &lt;a href=&quot;#&quot;&gt;Asia&lt;/a&gt;
  64.       &lt;a href=&quot;#&quot;&gt;Africa&lt;/a&gt;
  65.       &lt;a href=&quot;#&quot;&gt;Oceania&lt;/a&gt;
  66.       &lt;a href=&quot;#&quot;&gt;North America&lt;/a&gt;
  67.       &lt;a href=&quot;#&quot;&gt;South America&lt;/a&gt;
  68.     &lt;/sub-categories&gt;
  69.   &lt;/main-categories&gt;
  70. 	
  71.   &lt;!-- 6. --&gt;
  72.   &lt;main-categories&gt;
  73.     &lt;a href=&quot;#void&quot;&gt;Culture&lt;/a&gt;
  74.   &lt;/main-categories&gt;
  75. &lt;/nav&gt;

<!-- end snippet -->

I also created a Codepen here to see it working and play around with it
https://codepen.io/familias/pen/XWygWzY

Any idea how to center the sub-categories when hovering the main-categories?

答案1

得分: 1

代码反映

  1. sub-categories {
  2.   left: 50%;
  3.   transform: translateX(-50%);
  4. }
  6. sub-categories {
  7.   animation: rotateMenu 400ms ease-in-out forwards;
  8.   transform-origin: top center;
  9. }
  11. @keyframes rotateMenu {
  12.   0% {
  13.     transform: rotateX(-90deg);
  14.   }
  15.   70% {
  16.     transform: rotateX(20deg);
  17.   }
  18.   100% {
  19.     transform: rotateX(0deg);
  20.   }
  21. }

这是正确的代码以设置中心位置。然而，transform: translateX(-50%);（在sub-categories中）没有生效，因为您在动画中覆盖了它...所以它应该在动画结束时应用！

解决方案

  1. sub-categories {
  2.   left: 50%;
  3. }
  5. sub-categories {
  6.   animation: rotateMenu 400ms ease-in-out forwards;
  7.   transform-origin: top center;
  8. }
  10. @keyframes rotateMenu {
  11.   0% {
  12.     transform: rotateX(-90deg) translateX(-50%); /* 在这里 */
  13.   }
  14.   70% {
  15.     transform: rotateX(20deg) translateX(-50%); /* 在这里 */
  16.   }
  17.   100% {
  18.     transform: rotateX(0deg) translateX(-50%); /* 在这里 */
  19.   }
  20. }

在动画中，当您定义变换时，需要在每处都包含transformX(-50%)。这样，它将在动画期间和之后应用于元素。

示例

  1. <!-- 开始片段: js 隐藏: false 控制台: true babel: false -->
  3. <!-- 语言: lang-css -->
  5. /*** 可选设置 ***/
  6. .menu {
  7.   display: flex; /* 不需要调整，但这样菜单将始终单行显示，即使在小屏幕上也是如此。 */
  8. }
  9. .menu > main-categories > a {
  10.   display: flex; /* 无需调整，但这样点和<a>内的文本将始终放在一起。 */
  11.   gap: 5px; /* 两个元素之间的距离可以在Flex中设置，因此点和文本之间始终有5px的距离。 */
  12. }
  14. /*** 原始设置 ***/
  15. body, html {
  16.   margin: 0;
  17.   padding: 0;
  18.   border: 0;
  19.   outline: 0;
  20.   box-sizing: border-box;
  21.   text-align: center;
  22.   width: 100%;
  23.   height: 100%;
  24. }
  25. body {
  26.   background-color: #FFFFFF;
  27.   font-family: 'IBM Plex Serif', serif;
  28.   font-size: 16px;
  29.   font-weight: 400;
  30.   color: #121212;
  31. }
  32. a {
  33.   color: #121212;
  34.   text-decoration: none;
  35. }
  36. a:hover {
  37.   color: #E5633F;
  38. }
  39. nav {
  40.   grid-area: navi;
  41.   display: block;
  42.   text-align: center;
  43.   border-bottom: 3px solid #121212;
  44.   background-color: inherit;
  45. }
  46. nav {
  47.   position: -webkit-sticky;
  48.   position: sticky;
  49.   top: 0;
  50.   cursor: pointer;
  51.   z-index: 8;
  52.   width: 100%;
  53. }
  54. main-categories {
  55.   position: relative;
  56.   display: inline-block;
  57.   background-color: inherit;
  58.   text-transform: uppercase;
  59.   height: 42px;
  60.   line-height: 42px;
  61.   text-align: center;
  62.   padding: 0px 22px 0px 22px;
  63. }
  64. main-categories:hover {
  65.   color: #E5633F;
  66. }
  67. main-categories a {
  68.   position: relative;
  69.   text-decoration: none;
  70. }   
  71. main-categories a:hover {
  72.   color: #E5633F;
  73. }
  74. main-categories a:before {
  75.   content: '▪ ';
  76. }
  77. sub-categories {
  78.   display: none;
  79.   position: absolute;
  80.   width: auto;
  81.   left: 50%;
  82.   /* transform: translateX(-50%); 这不起作用，因为您已经在动画中覆盖了它...所以它应该在动画结束时应用！ */
  83.   text-align: center;
  84.   white-space: nowrap;
  85.   background-color: inherit;
  86. }
  87. sub-categories a {
  88.   display: block;
  89.   font-size: 15px;
  90.   padding: 0 36px 0 36px;
  91.   text-transform: capitalize;
  92.   text-decoration: none;
  93.   height: 36px;
  94.   line-height: 36px;
  95.   border-left: 1px solid #121212;
  96.   border-right: 1px solid #121212;
  97.   border-bottom: 1px solid #121212;
  98. }   
  99. sub-categories a:hover {
  100.   color: #FFFFFF;
  101.   background-color: #121212;
  102. }
  103. main-categories:hover sub-categories {
  104.   display: block;
  105. }
  106. sub-categories a:before {
  107.   content: '';
  108. }
  109. sub-categories {
  110.   animation: rotateMenu 400ms ease-in-out forwards;
  111.   transform-origin: top center;
  112. }
  114. @keyframes rotateMenu {
  115.   0% {
  116.     transform: rotateX(-90deg) translateX(-50%); /* 在这里 */
  117.   }
  118.   70% {
  119.     transform: rotateX(20deg) translateX(-50%); /* 在这里 */
  120.   }
  121.   100% {
  122.     transform: rotateX(0deg) translateX(-50%); /* 在这里 */
  123.   }
  124. }
  126. <!-- 语言: lang-html -->
  128. <link rel="preconnect" href="https://fonts.googleapis.com">
  129. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  130. <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@300;400;500&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
  132. <nav class="menu"> 
  133.   <!-- 1. -->
  134.   <main-categories>
  135.     <a href="#void">News</a>
  136.     <sub-categories>
  137.       <a href="#">Europe</a>
  138.       <a href="#">Asia</a>
  139.       <a href="#">Africa</a>
  140.       <a href="#">Oceania</a>
  141.       <a href="#">North America</a>
  142.       <a href="#">South America</a>
  143.     </sub-categories>
  144.   </main-categories>
  146.   <!-- 2. -->
  147.   <main-categories>
  148.     <a href="#void">Politics</a>
  149.     <sub-categories>
  150.       <a href="#">Europe</a>
  151.       <a href="#">Asia</a>
  152.       <a href="#">Africa</a>
  153.       <a href="#">Oceania</a>
  154.       <a href="#">North America</a>
  155.       <a href="#">South America</a>
  156.     </sub-categories>
  157.   </main-categories>
  159.   <!-- 3. -->
  160.   <main-categories>
  161.     <a href="#void">Economy</a>
  162.     <sub-categories>
  163.       <a href="#">Europe</a>
  164.       <a href="#">Asia</a>
  165.       <a href
  167. <details>
  168. <summary>英文:</summary>
  170. ### Reflection to your code
  172. ```css
  173. sub-categories {
  174.   left: 50%;
  175.   transform: translateX(-50%);
  176. }
  178. sub-categories {
  179.   animation: rotateMenu 400ms ease-in-out forwards;
  180.   transform-origin: top center;
  181. }
  183. @keyframes rotateMenu {
  184.   0% {
  185.     transform: rotateX(-90deg);
  186.   }
  187.   70% {
  188.     transform: rotateX(20deg);
  189.   }
  190.   100% {
  191.     transform: rotateX(0deg);
  192.   }
  193. }

Thats correct code to set center position. However, transform: translateX(-50%); (on sub-categories) doesn't take effect because you have overridden it with the animation... so it should be applied at the end of the animation!

Solution

  1. sub-categories {
  2.   left: 50%;
  3. }
  5. sub-categories {
  6.   animation: rotateMenu 400ms ease-in-out forwards;
  7.   transform-origin: top center;
  8. }
  10. @keyframes rotateMenu {
  11.   0% {
  12.     transform: rotateX(-90deg) translateX(-50%); /* HERE */
  13.   }
  14.   70% {
  15.     transform: rotateX(20deg) translateX(-50%); /* HERE */
  16.   }
  17.   100% {
  18.     transform: rotateX(0deg) translateX(-50%); /* HERE */
  19.   }
  20. }

In the animation, when you define the transform, you need to include transformX(-50%) everywhere. This way, it will be applied to the element during and after the animation.

Example

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. /*** OPTIONAL SETTINGS ***/
  2. .menu {
  3. display: flex; /* No adjustment is necessary, but this way the menu will always be single-line, even on small screens. */
  4. }
  5. .menu &gt; main-categories &gt; a {
  6. display: flex; /* No need for adjustment, but this way the dot and the text within the &lt;a&gt; will always be placed next to each other. */
  7. gap: 5px; /* The distance between the two elements can be set in Flex, so there will always be a 5px distance between the dot and the text. */
  8. }
  9. /*** ORIGINAL SETTINGS ***/
  10. body, html {
  11. margin: 0;
  12. padding: 0;
  13. border: 0;
  14. outline: 0;
  15. box-sizing: border-box;
  16. text-align: center;
  17. width: 100%;
  18. height: 100%;
  19. }
  20. body {
  21. background-color: #FFFFFF;
  22. font-family: &#39;IBM Plex Serif&#39;, serif;
  23. font-size: 16px;
  24. font-weight: 400;
  25. color: #121212;
  26. }
  27. a {
  28. color: #121212;
  29. text-decoration: none;
  30. }
  31. a:hover {
  32. color: #E5633F;
  33. }
  34. nav {
  35. grid-area: navi;
  36. display: block;
  37. text-align: center;
  38. border-bottom: 3px solid #121212;
  39. background-color: inherit;
  40. }
  41. nav {
  42. position: -webkit-sticky;
  43. position: sticky;
  44. top: 0;
  45. cursor: pointer;
  46. z-index: 8;
  47. width: 100%;
  48. }
  49. main-categories {
  50. position: relative;
  51. display: inline-block;
  52. background-color: inherit;
  53. text-transform: uppercase;
  54. height: 42px;
  55. line-height: 42px;
  56. text-align: center;
  57. padding: 0px 22px 0px 22px;
  58. }
  59. main-categories:hover {
  60. color: #E5633F;
  61. }
  62. main-categories a {
  63. position: relative;
  64. text-decoration: none;
  65. }   
  66. main-categories a:hover {
  67. color: #E5633F;
  68. }
  69. main-categories a:before {
  70. content: &#39;▪ &#39;;
  71. }
  72. sub-categories {
  73. display: none;
  74. position: absolute;
  75. width: auto;
  76. left: 50%;
  77. /* transform: translateX(-50%); This doesn&#39;t take effect because you have overridden it with the animation... so it should be applied at the end of the animation! */
  78. text-align: center;
  79. white-space: nowrap;
  80. background-color: inherit;
  81. }
  82. sub-categories a {
  83. display: block;
  84. font-size: 15px;
  85. padding: 0 36px 0 36px;
  86. text-transform: capitalize;
  87. text-decoration: none;
  88. height: 36px;
  89. line-height: 36px;
  90. border-left: 1px solid #121212;
  91. border-right: 1px solid #121212;
  92. border-bottom: 1px solid #121212;
  93. }   
  94. sub-categories a:hover {
  95. color: #FFFFFF;
  96. background-color: #121212;
  97. }
  98. main-categories:hover sub-categories {
  99. display: block;
  100. }
  101. sub-categories a:before {
  102. content: &#39;&#39;;
  103. }
  104. sub-categories {
  105. animation: rotateMenu 400ms ease-in-out forwards;
  106. transform-origin: top center;
  107. }
  108. @keyframes rotateMenu {
  109. 0% {
  110. transform: rotateX(-90deg) translateX(-50%); /* HERE */
  111. }
  112. 70% {
  113. transform: rotateX(20deg) translateX(-50%); /* HERE */
  114. }
  115. 100% {
  116. transform: rotateX(0deg) translateX(-50%); /* HERE */
  117. }
  118. }

<!-- language: lang-html -->

  1. &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot;&gt;
  2. &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin&gt;
  3. &lt;link href=&quot;https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@300;400;500&amp;family=Playfair+Display:wght@400;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
  5. &lt;nav class=&quot;menu&quot;&gt; 
  6.   &lt;!-- 1. --&gt;
  7.   &lt;main-categories&gt;
  8.     &lt;a href=&quot;#void&quot;&gt;News&lt;/a&gt;
  9.     &lt;sub-categories&gt;
  10.     &lt;a href=&quot;#&quot;&gt;Europe&lt;/a&gt;
  11.     &lt;a href=&quot;#&quot;&gt;Asia&lt;/a&gt;
  12.     &lt;a href=&quot;#&quot;&gt;Africa&lt;/a&gt;
  13.     &lt;a href=&quot;#&quot;&gt;Oceania&lt;/a&gt;
  14.     &lt;a href=&quot;#&quot;&gt;North America&lt;/a&gt;
  15.     &lt;a href=&quot;#&quot;&gt;South America&lt;/a&gt;
  16.     &lt;/sub-categories&gt;
  17.   &lt;/main-categories&gt;
  18. 	
  19.   &lt;!-- 2. --&gt;
  20.   &lt;main-categories&gt;
  21.     &lt;a href=&quot;#void&quot;&gt;Politics&lt;/a&gt;
  22.     &lt;sub-categories&gt;
  23.       &lt;a href=&quot;#&quot;&gt;Europe&lt;/a&gt;
  24.       &lt;a href=&quot;#&quot;&gt;Asia&lt;/a&gt;
  25.       &lt;a href=&quot;#&quot;&gt;Africa&lt;/a&gt;
  26.       &lt;a href=&quot;#&quot;&gt;Oceania&lt;/a&gt;
  27.       &lt;a href=&quot;#&quot;&gt;North America&lt;/a&gt;
  28.       &lt;a href=&quot;#&quot;&gt;South America&lt;/a&gt;
  29.     &lt;/sub-categories&gt;
  30.   &lt;/main-categories&gt;
  32.   &lt;!-- 3. --&gt;
  33.   &lt;main-categories&gt;
  34.     &lt;a href=&quot;#void&quot;&gt;Economy&lt;/a&gt;
  35.     &lt;sub-categories&gt;
  36.       &lt;a href=&quot;#&quot;&gt;Europe&lt;/a&gt;
  37.       &lt;a href=&quot;#&quot;&gt;Asia&lt;/a&gt;
  38.       &lt;a href=&quot;#&quot;&gt;Africa&lt;/a&gt;
  39.       &lt;a href=&quot;#&quot;&gt;Oceania&lt;/a&gt;
  40.       &lt;a href=&quot;#&quot;&gt;North America&lt;/a&gt;
  41.       &lt;a href=&quot;#&quot;&gt;South America&lt;/a&gt;
  42.     &lt;/sub-categories&gt;
  43.   &lt;/main-categories&gt;
  45.   &lt;!-- 4. --&gt;
  46.   &lt;main-categories&gt;
  47.     &lt;a href=&quot;#void&quot;&gt;Health&lt;/a&gt;
  48.     &lt;sub-categories&gt;
  49.       &lt;a href=&quot;#&quot;&gt;Europe&lt;/a&gt;
  50.       &lt;a href=&quot;#&quot;&gt;Asia&lt;/a&gt;
  51.       &lt;a href=&quot;#&quot;&gt;Africa&lt;/a&gt;
  52.       &lt;a href=&quot;#&quot;&gt;Oceania&lt;/a&gt;
  53.       &lt;a href=&quot;#&quot;&gt;North America&lt;/a&gt;
  54.       &lt;a href=&quot;#&quot;&gt;South America&lt;/a&gt;
  55.     &lt;/sub-categories&gt;
  56.   &lt;/main-categories&gt;
  58.   &lt;!-- 5. --&gt;
  59.   &lt;main-categories&gt;
  60.     &lt;a href=&quot;#void&quot;&gt;Education&lt;/a&gt;
  61.     &lt;sub-categories&gt;
  62.       &lt;a href=&quot;#&quot;&gt;Europe&lt;/a&gt;
  63.       &lt;a href=&quot;#&quot;&gt;Asia&lt;/a&gt;
  64.       &lt;a href=&quot;#&quot;&gt;Africa&lt;/a&gt;
  65.       &lt;a href=&quot;#&quot;&gt;Oceania&lt;/a&gt;
  66.       &lt;a href=&quot;#&quot;&gt;North America&lt;/a&gt;
  67.       &lt;a href=&quot;#&quot;&gt;South America&lt;/a&gt;
  68.     &lt;/sub-categories&gt;
  69.   &lt;/main-categories&gt;
  70. 	
  71.   &lt;!-- 6. --&gt;
  72.   &lt;main-categories&gt;
  73.     &lt;a href=&quot;#void&quot;&gt;Culture&lt;/a&gt;
  74.   &lt;/main-categories&gt;
  75. &lt;/nav&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月3日 23:07:40
  • 转载请务必保留本文链接：https://go.coder-hub.com/76606003.html
  • css
  • css-animations
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定