Flextify項目與justify-content：空間之間顯示不正確

Question

我有一個菜單欄與子菜單。我想在菜單的右邊選擇一個「Account」或「Profile」鏈接，我想用純CSS3/Flex來完成。

但我想我的CSS代碼有問題，因爲最後一個鏈接（「帳戶」）在主菜單下顯示，所以我的導航元素的不起作用。我該怎麼做 ？

這裏我的代碼：

nav { 
 
    font-size: 20px ; 
 
    background-color: white; 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
} 
 

 
nav ul { 
 
    display: flex; 
 
    flex-direction: row; 
 
    margin: 0; 
 
    padding: 0 ; 
 
    position: absolute; 
 
    background-color: white; 
 
    list-style-type: none; 
 
} 
 

 
nav ul li { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
nav ul li ul { 
 
    display: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    box-shadow: 3px 3px 3px 0px #DDDDDD; 
 
    background-color: white; 
 
} 
 

 
nav ul li:hover ul{ 
 
    display: block; 
 
} 
 

 
nav a { 
 
    color: #333; 
 
    display: block; 
 
    margin: 0; 
 
    padding: 10px 20px; 
 
    text-decoration: none; 
 
} 
 

 
nav a:hover { 
 
    background-color: #DDD; 
 
}

<nav> 
 
    <ul> 
 
     <li><a href="#">Menu1</a> 
 
      <ul> 
 
       <li><a href="#">Submenu</a></li> 
 
       <li><a href="#">Another longer submenu here</a></li> 
 
       <li><a href="#">Yet another submenu</a></li> 
 
       <li><a href="#">Etc. etc.</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Menu2</a></li> 
 
     <li><a href="#">Menu3</a> 
 
      <ul> 
 
       <li><a href="#">My submenu 1</a></li> 
 
       <li><a href="#">My submenu 2</a></li> 
 
       <li><a href="#">My submenu 3</a></li> 
 
       <li><a href="#">My submenu 4</a></li> 
 
       <li><a href="#">My submenu 5</a></li> 
 
       <li><a href="#">My submenu 6</a></li> 
 
       <li><a href="#">My submenu 7</a></li> 
 
       <li><a href="#">My submenu 8</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Menu4</a> 
 
     </li> 
 
    </ul> 
 
    <a href="#">Account</a> 
 
</nav>

Answer 1

OK，我才發現我的錯誤。

nav ul { position: absolute; } 

不應在此positionned，但在這裏：

nav ul li ul { position: absolute; } 

所以片斷固定的（希望它可以幫助別人）...

nav { 
 
    font-size: 20px ; 
 
    background-color: white; 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
} 
 

 
nav ul { 
 
    display: flex; 
 
    flex-direction: row; 
 
    margin: 0; 
 
    padding: 0 ; 
 
    background-color: white; 
 
    list-style-type: none; 
 
} 
 

 
nav ul li { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
nav ul li ul { 
 
    display: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    box-shadow: 3px 3px 3px 0px #DDDDDD; 
 
    background-color: white; 
 
    position: absolute;   
 
} 
 
nav ul li:hover ul{ 
 
    display: block; 
 
} 
 

 
nav a { 
 
    color: #333; 
 
    display: block; 
 
    margin: 0; 
 
    padding: 10px 20px; 
 
    text-decoration: none; 
 
} 
 

 
nav a:hover { 
 
    background-color: #DDD; 
 
}

<nav> 
 
    <ul> 
 
     <li><a href="#">Menu1</a> 
 
      <ul> 
 
       <li><a href="#">Submenu</a></li> 
 
       <li><a href="#">Another longer submenu here</a></li> 
 
       <li><a href="#">Yet another submenu</a></li> 
 
       <li><a href="#">Etc. etc.</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Menu2</a></li> 
 
     <li><a href="#">Menu3</a> 
 
      <ul> 
 
       <li><a href="#">My submenu 1</a></li> 
 
       <li><a href="#">My submenu 2</a></li> 
 
       <li><a href="#">My submenu 3</a></li> 
 
       <li><a href="#">My submenu 4</a></li> 
 
       <li><a href="#">My submenu 5</a></li> 
 
       <li><a href="#">My submenu 6</a></li> 
 
       <li><a href="#">My submenu 7</a></li> 
 
       <li><a href="#">My submenu 8</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Menu4</a> 
 
     </li> 
 
    </ul> 
 
    <a href="#">Account</a> 
 
</nav>