Элемент Flex с помощью justify-content: space-between отображается неправильно

Question

У меня есть панель меню с подменю. Я хочу, чтобы в той же строке, что и в меню, ссылка «Учетная запись» или «Профиль» справа, и я хочу сделать это с помощью чистого CSS3/Flex.

Но я думаю, что есть что-то не так в моем коде css, потому что последняя ссылка («Учетная запись») diplaying в главном меню, поэтому мой 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

ОК, я только что нашел мою ошибку.

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>