如何为嵌套结构的导航菜单添加Hover（悬停）显示/隐藏效果

Hey there! Let's get that nested navigation hover effect working for you. I’ve looked at your existing code, and here’s how to modify it to achieve the hover-to-show, leave-to-hide behavior you want.

Modified SCSS Code #

.navigation { 
  .cmp-navigation { 
    .cmp-navigation__group { 
      // Add position relative to parent items to anchor absolute child menus
      .cmp-navigation__item--level-0 { 
        position: relative; 
        display: inline-block; 
        padding: 10px; 
        .cmp-navigation__item-link { color: red; } 

        // Show level-1 menu when hovering the level-0 parent
        &:hover .cmp-navigation__group {
          display: block;
        }

        .cmp-navigation__group { 
          position: absolute; 
          display: none; // Hide child menu by default
          top: 100%; // Position directly below the parent item
          left: 0;
          .cmp-navigation__item--level-1 { 
            position: relative; // Anchor level-2 menu to this parent
            padding: 10px;
            .cmp-navigation__item-link { color: yellow; } 

            // Show level-2 menu when hovering the level-1 parent
            &:hover .cmp-navigation__group {
              display: block;
            }

            .cmp-navigation__group { 
              left: 100%; 
              position: absolute; 
              top: 0; 
              display: none; // Hide level-2 menu by default
              .cmp-navigation__item--level-2 { 
                padding: 10px;
                .cmp-navigation__item-link { color: orange; } 
              } 
            } 
          } 
        } 
      } 
    } 
  } 
}

// Remove this line - we're hiding child groups directly now
// .cmp-navigation__item--level-1 { display: none; }

Key Changes & Explanations #

• Added position: relative to parent items: This is critical because it tells the absolutely positioned child menus to position themselves relative to their parent list item (not the entire page), keeping them aligned correctly.
• Hid child .cmp-navigation__group by default: Instead of targeting individual level-1 items to hide, we hide the entire child menu container. This is cleaner and works seamlessly for nested levels.
• Used parent hover state to show child menus: When a level-0 item is hovered, its direct child menu group (level-1) becomes visible. The same logic applies to level-1 items showing their level-2 child menus.
• Adjusted menu positioning: top: 100% ensures level-1 menus sit directly below their parent, while left: 100% makes level-2 menus appear to the right of their parent item.

Optional: Add Smooth Transition (For Polished UX) #

If you want a smoother, less abrupt hover effect, replace display: none/block with opacity and visibility (since display can't be animated):

.navigation { 
  .cmp-navigation { 
    .cmp-navigation__group { 
      .cmp-navigation__item--level-0 { 
        position: relative; 
        display: inline-block; 
        padding: 10px; 
        .cmp-navigation__item-link { color: red; } 

        &:hover .cmp-navigation__group {
          opacity: 1;
          visibility: visible;
        }

        .cmp-navigation__group { 
          position: absolute; 
          opacity: 0;
          visibility: hidden;
          top: 100%;
          left: 0;
          transition: opacity 0.2s ease, visibility 0.2s ease; // Smooth fade-in/out
          .cmp-navigation__item--level-1 { 
            position: relative; 
            padding: 10px;
            .cmp-navigation__item-link { color: yellow; } 

            &:hover .cmp-navigation__group {
              opacity: 1;
              visibility: visible;
            }

            .cmp-navigation__group { 
              left: 100%; 
              position: absolute; 
              top: 0; 
              opacity: 0;
              visibility: hidden;
              transition: opacity 0.2s ease, visibility 0.2s ease;
              .cmp-navigation__item--level-2 { 
                padding: 10px;
                .cmp-navigation__item-link { color: orange; } 
              } 
            } 
          } 
        } 
      } 
    } 
  } 
}

Why This Works #

By tying the visibility of child menus directly to the hover state of their parent list items, we ensure the menu only shows when the user is actively interacting with the parent. The position: relative anchors keep the nested menus aligned perfectly, so they don't float away from their parent elements.

内容的提问来源于stack exchange，提问作者Pags