Nav bar issue

i have been struggling with this one for a while.Can anyone tell me what went wrong with the list called "My whereabouts" ? for whatever reason i never succeeded to stop the "contacts" list from overlapping it. It is ok in IE6 though but not in any other good browsers. The only work around I found was to place this list at the end of the menu but i would like someone to tell me why this is happening. Thank you for your help

HTML code:

<div class="menu">
<ul>
<li><a class="list" href="index.html">Home</a></li>
<li><a class="list" href="collections2.html">Collection<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
</a>
<ul>
<li><a href="collections2.html"></a><a href="outfit1.html" title="Printed sailor dress">Outfit 1</a></li>
<li><a href="outfit2.html" title="Little sailor top with hand printed short">Outfit 2</a></li>
<li><a href="outfit3.html" title="Fitted sailor dress">Outfit 3</a></li>
<li><a href="outfit4.html" title="Backless sailor tailored jackets with ruffles">Outfit 4</a></li>
<li><a href="outfit5.html" title="Bustier dress with upside down tailored jacket">Outfit 5</a></li>
<li><a href="outfit6.html" title="Printed sleeve shirt with puffy tailored skirt">Outfit 6</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a class="list" href="portfolio.html" onclick="return false">Portfolio<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
</a>
<ul>
<li><a href="sketch.html" title="A drop down menu">Sketches</a></li>
<li><a href="illustrations.html" title="A cascading menu">Illustrations</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a style="margin:0" class="list" href="profile.html" onclick="return false">Profile<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
</a>
<ul>
<li><a href="designer.html" title="The designer">The designer</a></li>
<li><a href="press.html" title="Press release">Press release</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li id="about"><a class="list" href="about.html">My whereabouts</a></li>
<li><a class="list" href="contacts.html">Contacts</a></li>
</ul>
</div>




CSS code:

/* NAVIGATION */

.menu
{
width:900px;
height:32px;
font-size:0.85em;
border-right:1px solid #000;
}

/* hack to correct IE5.5 faulty box model */
* html .menu
{
width:901px;
w\idth:900px;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul
{
height:134px;
background-color:#000000;
padding:0;
margin:0;
list-style-type:none;
}
.menu ul ul
{
width:120px;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li
{
text-align:center;
padding-left:15px;
float:left;
width:125px;
position:relative;
}

.menu li a.list {
padding-top:10px;
}

/* style the links for the top level */
.menu a.list, .menu a.list:visited
{

font-size:18px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-decoration:none;
color:#B0B0B0;
width:110px;
height:30px;
background:#000000;
line-height:20px;

}

.menu a.list {
border-right: solid 1px white;
border-bottom: solid 1px white;
}

/* style the links for the 2nd level */
.menu a, .menu a:visited
{
display:block;
font-size:15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-decoration:none;
color:#fff;
width:120px;
height:10px;
padding-left:10px;
line-height:0.6em;
border-bottom: solid 1px white;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited
{
width:120px;
w\idth:120px;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul
{
visibility:hidden;
position:absolute;
height:0;
top:35px;left:-10px;
width:120px;



}
/* another hack for IE5.5 */
* html .menu ul ul
{
top:28px;t\op:29px;
}

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table
{
position:absolute;
top:0;
left:0;
border-collapse:collapse;
}
/* style the second level links */
.menu ul ul a, .menu ul ul a:visited
{
background: #191919;
color:#fff;
height:auto;
line-height:1em;
padding:3px 3px;
width:120px;
border-left: solid 1px white;
border-right: solid 1px white;
}
/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited
{
width:120px;
w\idth:120px;
}
/* style the top level hover */
.menu a:hover, .menu a.list:hover,
{
color:#fff;
background:#000;
}
.menu :hover > a, .menu ul ul :hover > a, .menu :hover > a.list
{
color:#fff;
background:#000;
}

/* style the top level hover */
.menu ul ul a:hover {
color:#000;
background:#fff;
}

.menu ul ul :hover > a {
color:#000000;
background:#fff;
}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul, .menu ul a:hover ul, .menu ul a.list:hover ul
{
visibility:visible;
}

/* Increase width of Whereabouts menu so it shows inline*/
#about li {
margin:0;
padding:10px 0 0 ;
width: 150px;
}

#about a, #about a:visited {
width: 148px;
}

 

Hi guys,

Has any1 bothered to look for a solution yet?
I would really appreciate it as it is driving me mad at the moment.