Of course you build your navigation menu out of list-items. Inside the <li>tag
is another <ul> tag with some <li>tags, if your navigation structure has
multiple layers.
You also know that every unsorted or sorted list has a default whitespace on the left.
You properly don’t want that white space in your navigation menu, right? Here’s your
way to go:

• Imagine the outer <ul> has a class name like ‘left menu’.
• Also imagine that there are three top levels in this menu, ‘meat’, ‘bread’ and ‘fish’.
• The meat-menu item has two sub items; ‘chicken’ and ‘Pork’.

Your list should look like this:

<ul class=”leftmenu”>
<li>meat
<ul>
<li>chicken</li>
<li>pork</li>
</ul>
</li>
<li>bread</li>
<li>fish</li>
</ul>

Which is the same as:

• Meat
  • Chicken
  • Pork
• Bread
• Fish

Just add the following css-code to remove the left-whitespace for firefox:

ul.leftmenu ul{
padding-left:0px;
}



And add the following css-code to remove the left-whitespace for Internet
Explorer:

ul.leftmenu ul{
margin-left:0px;
}



This is a typical example of how Internet Explorer and Firefox render differently.

Good luck!