One issue arises when the number of menu items exceeds the capacity to fit on a single line, causing them not to wrap from left to right onto the second line. The desired outcome is for the second line of the menu to start on the left just like the first line as the menu expands. Any assistance would be greatly appreciated. Please note: We are refraining from using any JavaScript in this particular solution.
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}<li style="float:left" class="dropdown"> <a href="javascript:void(0)" class="dropbtn">MENU ITEM # 1</a>
<div class="dropdown-content"> <a href="" target="_blank" title="This is the test."> menu item</a> </div>
</li>Thank you