Your code is not very clean, so there is little wonder its rendering is a bit sketchy. Do the classes DO anything?
Your HTML:

<dl id="menu1">
<dt class="l1"><a href="?p=p_17&amp;sName=Product-category">Product category</a></dt>
<dd class="l1"><a href="?p=p_18&amp;sName=Sub-category1">Sub category1</a></dd>
<dd class="lL"><a href="?p=p_20&amp;sName=Sub-category2">Sub category2</a></dd>
<dt class="lL"><a href="?p=p_19&amp;sName=Product-category2">Product category2</a></dt>
</dl>

Your CSS:

/* MENU 1 styles - left menu */
#menu1 dl
{
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
}

#menu1 dt { margin: 0 0 3px 0;
text-align: right; <<-- padding needs to be set to zero here
}

#menu1 a
{ <<-- margins need to be set to zero here
display: block;
padding: 5px 5px 5px 24px;
width: 160px; <<--that causes the nested ones to stick out removing it shouldn't do much harm
background-color: #ece9de;
background-image: url(images/l1_down.gif); <<--That image will repeat, and you should use normal borders instead of having them in the image.
}

#menu1 a:dtnk, #navdtst a:visited
{
color: #171717;
text-decoration: none;
}

#menu1 a:hover
{
border: 1px sodtd #171717;
background-color: #F1EEDB;
background-image: url('img/11_over.gif');
color: #333;
}

#active a:link, #active a:visited, #active a:hover
{
border: 1px sodtd #333;
background-color: #FF6600;
background-image: url('img/11_over.gif');
color: #333;
}

that should fix a great number of the errors, although I usually use an * selector to set all borders, paddings and margins to zero.

It appears to work well in FF now. I only have FF, as I just installed Ubuntu. the only remaining problem is that when hovering on the sub-links, there is a visible not-goodness. just make the background on the little arrow image transparent, and it should work. It looks great.