在嵌套类导航上应用悬停

Question

我在下面有一个模拟示例代码，它在我的项目中显示一个嵌套的子菜单

.navigation {
    .cmp-navigation {
        .cmp-navigation__group {
            .cmp-navigation__item--level-0 {
                display: inline-block;
                padding: 10px;

                .cmp-navigation__item-link {
                    color: red;
                }

                .cmp-navigation__group {
                   position: absolute;
                   display: block;

                    .cmp-navigation__item--level-1 {
                        .cmp-navigation__item-link {
                            color: yellow;
                        }

                        .cmp-navigation__group {
                            left: 100%;
                            position: absolute;
                            top: 0px;
         
                            .cmp-navigation__item--level-2 {
                                .cmp-navigation__item-link {
                                    color: orange;
                                }
                            }
                         }
                    }
                }
            }
        }
    }    
}

.navigation {
    .cmp-navigation {
        .cmp-navigation__group {
            .cmp-navigation__item--level-0 {
                display: inline-block;
                padding: 10px;

                .cmp-navigation__item-link {
                    color: red;
                }

                .cmp-navigation__group {
                   position: absolute;
                   display: block;

                    .cmp-navigation__item--level-1 {
                        .cmp-navigation__item-link {
                            color: yellow;
                        }

                        .cmp-navigation__group {
                            left: 100%;
                            position: absolute;
                            top: 0px;
         
                            .cmp-navigation__item--level-2 {
                                .cmp-navigation__item-link {
                                    color: orange;
                                }
                            }
                         }
                    }
                }
            }
        }
    }    
}

.cmp-navigation__item--level-1 {
    display: none;
}

<div class="navigation aem-GridColumn aem-GridColumn--default--12">
         <nav class="cmp-navigation" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
            <ul class="cmp-navigation__group">
               <li class="cmp-navigation__item cmp-navigation__item--level-0">
                  <a href="" title="Home" data-cmp-clickable class="cmp-navigation__item-link">Home</a>
               </li>
               <li class="cmp-navigation__item cmp-navigation__item--level-0">
                  <a href="" title="Equipments" data-cmp-clickable class="cmp-navigation__item-link">Equipments</a>
                  <ul class="cmp-navigation__group">
                     <li class="cmp-navigation__item cmp-navigation__item--level-1">
                        <a href="" title="Trucks" data-cmp-clickable class="cmp-navigation__item-link">Trucks</a>
                     </li>
                     <li class="cmp-navigation__item cmp-navigation__item--level-1">
                        <a href="" title="Woods" data-cmp-clickable class="cmp-navigation__item-link">Woods</a>
                     </li>
                  </ul>
               </li>
            </ul>
         </nav>
      </div>

输出是这样的

上面的代码工作正常，但我的问题是如何在子菜单上应用悬停。我对这个嵌套视图的目标是在悬停时应用隐藏和显示。感谢您的帮助

Answer 1

首先您需要使用display: none 隐藏子菜单项。然后您需要将:hover 添加到子菜单的父级以从display: none 更改为display: block。这是一个例子。

nav ul li ul li {
  display: none;
}

nav ul li:hover ul li {
  display: block;
}

<div class="navigation aem-GridColumn aem-GridColumn--default--12">
  <nav class="cmp-navigation" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
    <ul class="cmp-navigation__group">
      <li class="cmp-navigation__item cmp-navigation__item--level-0">
        <a href="" title="Home" data-cmp-clickable class="cmp-navigation__item-link">Home</a>
      </li>
      <li class="cmp-navigation__item cmp-navigation__item--level-0">
        <a href="" title="Equipments" data-cmp-clickable class="cmp-navigation__item-link">Equipments</a>
        <ul class="cmp-navigation__group">
          <li class="cmp-navigation__item cmp-navigation__item--level-1">
            <a href="" title="Trucks" data-cmp-clickable class="cmp-navigation__item-link">Trucks</a>
          </li>
          <li class="cmp-navigation__item cmp-navigation__item--level-1">
            <a href="" title="Woods" data-cmp-clickable class="cmp-navigation__item-link">Woods</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>