带有子菜单的 Flex 下拉菜单未在正确位置打开答案

【问题标题】：Flex dropdown menu with submenu not opening in the proper position带有子菜单的 Flex 下拉菜单未在正确位置打开
【发布时间】：2018-12-08 05:16:36
【问题描述】：

我正在构建一个下拉菜单，其中可能包含使用 CSS flex 的子菜单。这是我的代码：

<div class="nav-menu-dropdown">
  <div class="dropdown-menu-container dropdown-menu-open-left">
    <div class="dropdown-menu">
      <ul>
        <div class="dropdown-menu-item">
          <li class="dropdown-menu-title"><a href="#"><span>Admin Menu</span></a></li>
        </div>
        <div class="dropdown-menu-item">
          <li><a href="#"><span><div class="dropdown-menu-item-with-icon"><div class="dropdown-menu-item-with-icon-text">Admin</div><div class="dropdown-menu-item-with-icon-icon"><span class="fa fa-caret-right"></span></div></div></span></a>
            <div
            class="dropdown-menu-container dropdown-menu-submenu">
              <div class="dropdown-menu">
                <ul>
                  <div class="dropdown-menu-item">
                    <li><a href="#"><span><div class="dropdown-menu-item-with-icon"><div class="dropdown-menu-item-with-icon-text">Option 1</div><div class="dropdown-menu-item-with-icon-icon"><span class="fa fa-building"></span></div></div></span></a></li>
                  </div>
                  <div class="dropdown-menu-item">
                    <li><a href="#"><span><div class="dropdown-menu-item-with-icon"><div class="dropdown-menu-item-with-icon-text">Option 2</div><div class="dropdown-menu-item-with-icon-icon"><span class="fa fa-user"></span></div></div></span></a></li>
                  </div>
                </ul>
              </div>
        </div>
        </li>
    </div>
    <div class="dropdown-menu-item">
      <div class="dropdown-menu-divider"></div>
    </div>
    <div class="dropdown-menu-item">
      <li class="dropdown-menu-title"><a href="#"><span>User Menu</span></a></li>
    </div>
    <div class="dropdown-menu-item">
      <li><a href="#"><span><div class="dropdown-menu-item-with-icon"><div class="dropdown-menu-item-with-icon-text">User</div><div class="dropdown-menu-item-with-icon-icon"><span class="fa fa-caret-right"></span></div></div></span></a>
        <div
        class="dropdown-menu-container dropdown-menu-submenu">
          <div class="dropdown-menu">
            <ul>
              <div class="dropdown-menu-item">
                <li><a href="#"><span><div class="dropdown-menu-item-with-icon"><div class="dropdown-menu-item-with-icon-text">User Option 2</div><div class="dropdown-menu-item-with-icon-icon"><span class="fa fa-users"></span></div></div></span></a></li>
              </div>
              <div class="dropdown-menu-item">
                <li><a href="#"><span><div class="dropdown-menu-item-with-icon"><div class="dropdown-menu-item-with-icon-text">User Option 3</div><div class="dropdown-menu-item-with-icon-icon"><span class="fa fa-caret-right"></span></div></div></span></a></li>
              </div>
            </ul>
          </div>
    </div>
    </li>
  </div>
  <div class="dropdown-menu-item">
    <li><a href="#"><span><div class="dropdown-menu-item-with-icon"><div class="dropdown-menu-item-with-icon-text">Companies</div><div class="dropdown-menu-item-with-icon-icon"><span class="fa fa-caret-left"></span></div></div></span></a></li>
  </div>
  <div class="dropdown-menu-item">
    <div class="dropdown-menu-divider"></div>
  </div>
  <div class="dropdown-menu-item">
    <li class="dropdown-menu-title"><a href="#"><span>End Of Options</span></a></li>
  </div>
  </ul>
</div>
</div>
</div>

CSS：

.nav-menu-dropdown {
  position: relative;
  display: flex;
}

.dropdown-menu-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  min-width: 100px;
  background-color: lightgrey;
  border: solid;
  border-color: black;
  border-width: 1px;
  border-radius: 4px;
  box-shadow: 0px 2px 2px 0px red;
  top: 105%;
  text-align: left;
  z-index: 1;
}

.dropdown-menu * {
  padding: 0px;
  margin: 0px;
  text-decoration: none;
  list-style-type: none;
}

.dropdown-menu-submenu {
  position: absolute;
  display: none;
}

.dropdown-menu-open-left {
  left: initial;
  right: 0px;
}

.dropdown-menu-item {
  display: relative;
  padding: 3px 3px 3px 3px; // top right botton left
}

.dropdown-menu-item:hover .dropdown-menu-submenu {
  display: flex;
}

.dropdown-menu-item:hover {
  background-color: green;
}

.dropdown-menu-item:active {
  color: green;
  background-color: red;
}

.dropdown-menu-item-with-icon {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.dropdown-menu-item-with-icon-text {
  flex: 8;
}

.dropdown-menu-item-with-icon-icon {
  flex: 2;
  text-align: right;
}

.dropdown-menu-title {
  color: $ux-theme-color-text;
  white-space: nowrap;
  letter-spacing: 1px;
}

.dropdown-menu-divider {
  border-bottom-style: solid;
  border-color: black;
  border-width: 1px;
  margin: 1px -1px;
}

奇怪的是，我无法在悬停项目的一侧打开子菜单。子菜单出现在容器的底部，两个子菜单位于同一位置。

我认为这应该很简单，但我不知道这里发生了什么。如何在悬停的菜单项的一侧显示我的菜单？

小提琴可以找到here

【问题讨论】：

我以为您希望子菜单显示在悬停项目的一侧，而不是在它们下方。

标签： html css flexbox css-position

【解决方案1】：

定位中的一个小故障 - 您可以在 .dropdown-menu-item 上添加 position: relative - 请参见下面的演示：

.nav-menu-dropdown {
  position: relative;
  display: flex;
}

.dropdown-menu-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  min-width: 100px;
  background-color: lightgrey;
  border: solid;
  border-color: black;
  border-width: 1px;
  border-radius: 4px;
  box-shadow: 0px 2px 2px 0px red;
  top: 105%;
  text-align: left;
  z-index: 1;
}

.dropdown-menu * {
  padding: 0px;
  margin: 0px;
  text-decoration: none;
  list-style-type: none;
}

.dropdown-menu-submenu {
  position: absolute;
  display: none;
}

.dropdown-menu-open-left {
  left: initial;
  right: 0px;
}

.dropdown-menu-item {
  position: relative;
  padding: 3px 3px 3px 3px; 
}

.dropdown-menu-item:hover .dropdown-menu-submenu {
  display: flex;
}

.dropdown-menu-item:hover {
  background-color: green;
}

.dropdown-menu-item:active {
  color: green;
  background-color: red;
}

.dropdown-menu-item-with-icon {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.dropdown-menu-item-with-icon-text {
  flex: 8;
}

.dropdown-menu-item-with-icon-icon {
  flex: 2;
  text-align: right;
}

.dropdown-menu-title {
  color: $ux-theme-color-text;
  white-space: nowrap;
  letter-spacing: 1px;
}

.dropdown-menu-divider {
  border-bottom-style: solid;
  border-color: black;
  border-width: 1px;
  margin: 1px -1px;
}

<div class="nav-menu-dropdown">
  <div class="dropdown-menu-container dropdown-menu-open-left">
    <div class="dropdown-menu">
      <ul>
        <div class="dropdown-menu-item">
          <li class="dropdown-menu-title"><a href="#"><span>Admin Menu</span></a></li>
        </div>
        <div class="dropdown-menu-item">
          <li><a href="#"><span><div class="dropdown-menu-item-with-icon"><div class="dropdown-menu-item-with-icon-text">Admin</div><div class="dropdown-menu-item-with-icon-icon"><span class="fa fa-caret-right"></span></div></div></span></a>
            <div
            class="dropdown-menu-container dropdown-menu-submenu">
              <div class="dropdown-menu">
                <ul>
                  <div class="dropdown-menu-item">
                    <li><a href="#"><span><div class="dropdown-menu-item-with-icon"><div class="dropdown-menu-item-with-icon-text">Option 1</div><div class="dropdown-menu-item-with-icon-icon"><span class="fa fa-building"></span></div></div></span></a></li>
                  </div>
                  <div class="dropdown-menu-item">
                    <li><a href="#"><span><div class="dropdown-menu-item-with-icon"><div class="dropdown-menu-item-with-icon-text">Option 2</div><div class="dropdown-menu-item-with-icon-icon"><span class="fa fa-user"></span></div></div></span></a></li>
                  </div>
                </ul>
              </div>
        </div>
        </li>
    </div>
    <div class="dropdown-menu-item">
      <div class="dropdown-menu-divider"></div>
    </div>
    <div class="dropdown-menu-item">
      <li class="dropdown-menu-title"><a href="#"><span>User Menu</span></a></li>
    </div>
    <div class="dropdown-menu-item">
      <li><a href="#"><span><div class="dropdown-menu-item-with-icon"><div class="dropdown-menu-item-with-icon-text">User</div><div class="dropdown-menu-item-with-icon-icon"><span class="fa fa-caret-right"></span></div></div></span></a>
        <div
        class="dropdown-menu-container dropdown-menu-submenu">
          <div class="dropdown-menu">
            <ul>
              <div class="dropdown-menu-item">
                <li><a href="#"><span><div class="dropdown-menu-item-with-icon"><div class="dropdown-menu-item-with-icon-text">User Option 2</div><div class="dropdown-menu-item-with-icon-icon"><span class="fa fa-users"></span></div></div></span></a></li>
              </div>
              <div class="dropdown-menu-item">
                <li><a href="#"><span><div class="dropdown-menu-item-with-icon"><div class="dropdown-menu-item-with-icon-text">User Option 3</div><div class="dropdown-menu-item-with-icon-icon"><span class="fa fa-caret-right"></span></div></div></span></a></li>
              </div>
            </ul>
          </div>
    </div>
    </li>
  </div>
  <div class="dropdown-menu-item">
    <li><a href="#"><span><div class="dropdown-menu-item-with-icon"><div class="dropdown-menu-item-with-icon-text">Companies</div><div class="dropdown-menu-item-with-icon-icon"><span class="fa fa-caret-left"></span></div></div></span></a></li>
  </div>
  <div class="dropdown-menu-item">
    <div class="dropdown-menu-divider"></div>
  </div>
  <div class="dropdown-menu-item">
    <li class="dropdown-menu-title"><a href="#"><span>End Of Options</span></a></li>
  </div>
  </ul>
</div>
</div>
</div>

【讨论】：

我知道我错过了一些简单的东西......谢谢。

【解决方案2】：

.dropdown-menu * {
  padding: 0px;
  margin: 0px;
  text-decoration: none;
  list-style-type: none;
  position: relative;       /* NEW; establishes the nearest positioned ancestor 
                              (i.e., the bounding box) for abspos descendents */
}

.dropdown-menu-submenu {
  position: absolute;
  display: none;
  right: 105%;            /* NEW */
  top: 0;                 /* NEW */
}

https://jsfiddle.net/xu38Lr5f/1/

【讨论】：