Hi, I'm currently having a problem which I've faced for 3 days. I urgently need some help here. Below are the codes n css style. Please advise on what's wrong. Thanks in advance!

Codes:
<tr bgcolor="#cc0000">
<td height="36" colspan="5" valign="middle">
<div id="navcontainer">
<ul id="nav">
<li>Home</li>
<li>About Us ></li>
<ul>
<li>History</li>
<li>Letter from The Club President ></li>
<ul>
<li>2006-2007 Committee</li>
<li>Immediate Past Committee</li>
</ul>
<li>Letter from The Consul-General</li>
</ul>
<li>News ></li>
<ul>
<li>News & Upcoming Events ></li>
<ul>
<li>Monthly Calendar of Events</li>
</ul>
<li>Current News</li>
</ul>
<li>Past Events ></li>
<ul>
<li>2006</li>
<li>2005</li>
<li>2004</li>
</ul>
<li>Membership ></li>
<ul>
<li>Types of Membership</li>
<li>Benefits</li>
<li>Apply Now!</li>
<li>Directory ></li>
<ul>
<li>2003-2004</li>
<li>2004-2005</li>
<li>2005-2006</li>
</ul></ul>
<li>Sponsors</li>
<li>Partners</li>
<li>Contact Us</li>
<li>Site Map</li>
</ul>
</div>
</td>
</tr>

CSS:

#navcontainer
{
background: #CC0000;
margin: 0 auto;
padding: 1em 0 0 0;
font-family: georgia, serif;
height: 35px;
}

/* to stretch the container div to contain floated list */
#navcontainer:after
{
content: ".";
display: block;
line-height: 1px;
font-size: 1px;
clear: both;
}

#nav, #nav ul
{
list-style: none;
padding: 0;
margin: 0;
width: 98%;
font-size: 0.92em;
text-align: center;
background: #cc0000;
line-height: 1;
}

#nav ul
{
position: absolute;
top: 0;
left: 100%;
}

#nav ul ul
{
position: absolute;
z-index: 500;
}

#nav a
{
display: block;
width: 10em;
}

#nav li
{
display: block;
float: left;
width: 8em;
margin: 0;
padding: 0;
position: relative;
}

#nav li ul
{
position: absolute;
left: -999em;
width: 10em;
display: none;
}

#nav li:hover ul
{
left: auto;
}

sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls.onmouseover=function() { this.className+=" sfhover"; } sfEls.onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover);

#nav li ul
{
left: auto;
display: none;
}

#nav li>ul
{
top: auto;
left: auto;
}

#nav li a
{
display: block;
width: 100%;
padding: 0.5em;
border-width: 2px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #777;
text-decoration: none;
background: #f7f2ea;
}

#navcontainer>#nav li a { width: auto; }

#nav li#active a
{
background: #f0e7d7;
color: #800000;
}

#nav li a:hover, #nav li#active a:hover
{
color: #800000;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
}

#nav li:hover > ul {
display: block;
}

#nav li:hover ul, li.over ul{ display: block; }


#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul
{
left: -999em;
display: block;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
display: block
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
display: none;
}

#nav li ul ul {
margin: -1em 0 0 10em;
display: none;
}

#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
display: block;
}

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
left: auto;
display: block;
}