Html 子菜单未在正确位置打开的Flex下拉菜单

我正在构建一个下拉菜单，其中可能包含使用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>

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

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

可以发现小提琴在定位上有点小故障-您只需在

上添加
位置：相对
。下拉菜单项

-请参阅下面的演示：

.nav菜单下拉列表{
位置：相对位置；
显示器：flex；
}
.下拉菜单容器{
位置：绝对位置；
显示器：flex；
弯曲方向：立柱；
柔性包装：nowrap；
最小宽度：100px；
背景颜色：浅灰色；
边框：实心；
边框颜色：黑色；
边框宽度：1px；
边界半径：4px；
盒影：0px 2px 2px 0px红色；
最高：105%；
文本对齐：左对齐；
z指数：1；
}
.下拉菜单*{
填充：0px；
边际：0px；
文字装饰：无；
列表样式类型：无；
}
.下拉菜单子菜单{
位置：绝对位置；
显示：无；
}
.下拉菜单打开左侧{
左：首字母；
右：0px；
}
.下拉菜单项{
位置：相对位置；
填充：3px 3px 3px 3px；
}
.下拉菜单项：悬停.下拉菜单子菜单{
显示器：flex；
}
.下拉菜单项：悬停{
背景颜色：绿色；
}
.下拉菜单项：活动{
颜色：绿色；
背景色：红色；
}
.带图标的下拉菜单项{
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
}
.带有图标文本的下拉菜单项{
弹性：8；
}
.带有图标的下拉菜单项{
弹性：2；
文本对齐：右对齐；
}
.下拉菜单标题{
颜色：$ux主题颜色文本；
空白：nowrap；
字母间距：1px；
}
.下拉菜单分隔符{
边框底部样式：实心；
边框颜色：黑色；
边框宽度：1px；
保证金：1px-1px；
}

---

我知道我错过了一些简单的东西。。。谢谢。我以为您希望子菜单显示在悬停项目的侧面，而不是下方。

.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;
}

.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 */
}