I have a menu that displays multiple links using a styled UL. Everything looks great at 100% resolution, but when I adjust the screen resolution, the links no longer fit within the menu and some end up on another line, causing issues.
My concern is this - if all the elements are aligned properly at 100% resolution, shouldn't they scale accordingly when the resolution changes? The structure of the menu should remain consistent. How can I keep this menu static and prevent the LI from reordering?
Here is my code snippet:
<ul class="top-menu drop" style="margin:4px 10px 0 0;">
//get items from DB to var $Result
while($a_row=mysql_fetch_array($Result))
{
$menu_id++;
echo "<li><a href=''>$a_row[main_product_name]</a>";
echo "<ul class='drop-down' id='menu$menu_id'>";
//populate the menu UL
echo "</ul></li>";
}
The CSS for the menu:
.top-menu{
padding:0;
margin:0 10px 0 0;
height:20px;
list-style: none;
}