My primary navigation menu has numerous child items, and I want to ensure they remain visually appealing and organized. To achieve this, I am aiming to limit each row of submenu items to only 4.
After researching other solutions online, I attempted adding a flex: 1 1 25%; to my CSS code. However, this adjustment did not produce the desired outcome.
.nav {
position: fixed;
top: 0;
left: 0;
background-color: rgba(255, 255, 255, .8);
border-radius: 0px;
border: none;
width: 100%;
margin: 5px;
padding: 10px 0;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.item {
color: black;
font-weight: bold;
text-transform: uppercase;
}
.submenu {
display: none;
align-items: center;
text-align: center;
position: absolute;
top: 107px;
left: 0;
right: 0;
z-index: 1;
background-color: #2F4F4F;
color: white;
}
.item.has-children:hover .submenu {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-evenly;
padding: 10px;
flex-wrap: wrap;
color: black;
background-color: rgba(255, 255, 255, .8);
}<nav>
<ul class="nav">
<li class="item">
<a href="index.html">
<img src="Images/Navigation/Logo.png" alt="Home" />
</a>
</li>
<!-- More Navigation Items Here -->
</ul>
</nav>I was hoping for layout like this: 1 2 3 4 5 6 7 8 9 10 11 12
However, currently it displays as a continuous list without breaking into rows.