Flex下拉菜單，子菜單未在正確位置打開

Question

我正在構建可能包含使用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

Answer 1

在定位有輕微毛刺 - 你可以添加position: relative上.dropdown-menu-item - 看演示如下：

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

Answer 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/