CSS菜单仅保留1个选项时flyout飞出层常显问题咨询

使用这款CSS菜单组件时，删除菜单内部分条目后，flyout飞出层会始终处于显示状态。比如「Shop」菜单仅保留1个条目时，「Derps」选项会直接常驻显示，无法默认隐藏。
修改后的「Shop」菜单代码如下：

<li>
     <a href="#"><i class="ion-bag"></i> <span>Shop</span></a>
          <ul class="nav-flyout">
            <li>
              <a href="#"><i class="ion-ios-color-filter-outline"></i>Derps</a>
            </li>
          </ul>
</li>

需要调整CSS实现的效果：

• 无论菜单下包含多少个条目，flyout飞出层默认保持隐藏
• 仅当鼠标hover到对应父级菜单条目时，flyout层才显示

这个问题是原组件CSS的隐藏逻辑依赖了子菜单条目数量，单条目场景下规则失效导致的，直接把显示/隐藏逻辑和子项数量解耦即可：

1. 先给.nav-flyout设置固定的默认隐藏样式，规避被子项数量规则影响的问题：

.nav-flyout {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  z-index: 999;
  /* 核心默认隐藏属性 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.2s ease;
}

2. 将flyout的显示触发规则绑定到父级li的hover状态，完全不依赖子菜单的条目数量：

/* 给父级li加相对定位，作为flyout绝对定位的参照 */
.nav > li {
  position: relative;
}
/* 父级菜单hover时才显示flyout */
.nav > li:hover .nav-flyout {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

3. 检查原有CSS代码，如果存在类似.nav-flyout li:only-child的特殊显示规则，直接删除即可，避免它覆盖默认隐藏的样式。

注意：不要把flyout的显示触发绑定在子项li的hover状态上，必须绑定在直接父级li的hover状态，才能保证鼠标移入父菜单就显示、移出就隐藏，完全不受子项数量影响。

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