justify-contentのあるFlexアイテム：スペースが正しく表示されない

Question

サブメニュー付きのメニューバーがあります。メニューと同じ行に、右の "Account"または "Profile"のリンクが必要です。私は純粋なCSS3/Flexでそれをやりたいのです。

しかし、最後のリンク（「アカウント」）がメインメニューの下で表示されているので、私のCSSコードに何か間違いがあると思いますので、justify-content: space-betweenのnav要素が機能していません。どうしたらいいですか？

ここに私のコード：

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>