Flex item with justify-content: space-between is not displaying correctly

Question

I have a menu bar with sub-menus. I want on the same line as the menu an "Account" or "Profile" link on the right, and I want to do it with pure CSS3/Flex.

But I guess there is something wrong in my css code because the last link ("Account") is diplaying under the main menu, so my justify-content: space-between for the nav element is not working. How can I do it ?

Here my code :

 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, I just found my error.

nav ul { position: absolute; }

should not be positionned here, but here :

nav ul li ul { position: absolute; }

So the snippet fixed (hope it could help someone else)...

 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>