I'm trying to create a menu bar with sub-menus in CSS using Flexbox. I want to have an "Account" or "Profile" link on the right side of the menu bar on the same line, but for some reason, it's displaying under the main menu. I believe there's an issue with my CSS code, specifically the justify-content: space-between property for the nav element. How can I fix this?
Here's the code I'm currently using:
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>