Question

我有一个导航菜单项，将其悬停时会弹出6个子菜单项。我希望它们出现在两个相邻的3块中。

我会以为仅对父元素display: flex进行的.menu-item-1可以做到这一点，但似乎没有用？

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

当前菜单有两个子块，每个子块有3个子菜单项，彼此相邻，所以看起来只有三个子项。

codepen：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

position: absolute;上的.submenu导致项目.pratice-areas-submenu-1藏在.pratice-areas-submenu-2的后面。您可以通过将left: 150%;应用于.pratice-areas-submenu-2来解决此问题的一种幼稚方法。

另一种方法是删除position: absolute上的.submenu并将其添加到margin-top: 2rem; transform: translate(-6rem);中。还有很多其他方式。

Answer 2

+1由于@waleed Iqbal所述的原因而无法正常工作。

我个人解决此问题的方法是插入一个子菜单容器，并将其放置为绝对位置，并使其显示柔韧性。

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-container {
  position: absolute;
  top: 5rem;
  display: flex;
}
.submenu {
  background: lightblue;
  padding: 1rem;
  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
      <div class="submenu-container">
        <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>
      </div>
    </li>
</ul>

这里是pen。

有两个相邻的Nav子菜单块

2 个答案: