I recently created a CSS menu that is functioning well, but I'm encountering an issue when zooming in. The buttons inside the menu are wrapping onto a second line instead of staying on the same line. Any advice on how to keep the buttons in the menu on the same line without wrapping would be greatly appreciated.
Below is the code snippet I have been working with:
#cssmenu ul {
margin: 0;
padding: 7px 6px 0;
background: #e3d678;
line-height: 100%;
display: inline-block;
min-width: 100%;
white-space: nowrap;
}
#cssmenu li {
margin: 0 5px;
padding: 0 0 8px;
display: inline-block;
position: relative;
list-style: none;
}<div id='cssmenu' dir="ltr">
<ul>
<li runat="server" class='active'> <a href='' "><span></a></li>
<li runat="server " > <a href=''"><span></a></li>
<li runat="server" > <a href=''"><span></a></li>
</ul>
</div>