html - 有两个相邻的导航子菜单 block

Question

我有一个导航菜单项，当鼠标悬停在上面时会弹出 6 个子菜单项。我希望它们出现在两个相邻的 3 个 block 中。

我原以为只要在父元素 .menu-item-1 上执行 display: flex 就可以做到这一点，但它似乎不起作用？

我必须使用 li 元素，但任何关于它为什么不起作用的帮助都会很棒。

当前菜单有两个 block ，每 block 3 个子菜单项，它们彼此重叠，所以它看起来只有三个元素。

代码笔:https://codepen.io/emilychews/pen/LwPvbq

li {list-style-type: none}
  
ul.nav-menu-items {
  display: flex;
  justify-content: flex-start;
}
  
.menu-item {
  list-style-type: none;
  position: relative;
  padding: 2rem 1rem 2rem 1rem
}

.menu-item-1 {
  display: flex;
}

/* SUB MENU */

.submenu {
  position: absolute;
  background: lightblue;
  padding: 1rem;
  top: 5rem;
  visibility: hidden;
  width: 22rem;
}

.submenu-item {
  padding-bottom: .5rem;
}

.submenu-item:last-child {
  padding-bottom: 0;
}

.menu-item:hover .submenu {
  visibility: visible;
  opacity: 1;
}

<ul class="nav-menu-items">
    <li class="menu-item menu-item-1">MENU-ITEM
        <ul class="submenu pratice-areas-submenu-1">
            <li class="submenu-item submenu-item-1"><a href="./" class="navigation--link">SUB MENU ITEM</a></li>
            <li class="submenu-item submenu-item-3"><a href="./" class="navigation--link">SUB MENU ITEM</a></li>
            <li class="submenu-item submenu-item-5"><a href="./" class="navigation--link">SUB MENU ITEM</a></li>
        </ul>
        <ul class="submenu pratice-areas-submenu-2">
            <li class="submenu-item submenu-item-1"><a href="./" class="navigation--link">SUB MENU ITEM</a></li>
            <li class="submenu-item submenu-item-3"><a href="./" class="navigation--link">SUB MENU ITEM</a></li>
            <li class="submenu-item submenu-item-5"><a href="./" class="navigation--link">SUB MENU ITEM</a></li>
        </ul>
    </li>
</ul>

Answer 1

.submenu 上的 position: absolute; 导致元素 .pratice-areas-submenu-1 隐藏在 后面.pratice-areas-submenu-2。您可以通过将 left: 150%; 应用到 .pratice-areas-submenu-2 来开始修复此问题。

另一种方法是删除 .submenu 上的 position: absolute 并添加 margin-top: 2rem;转换:翻译(-6rem)；。还有很多其他方法。