<tr bgcolor="#cc0000">
    <td height="36" colspan="5" valign="middle">
 <div id="navcontainer">
 <ul id="nav">
 <li><a href="hometry.html">Home</a></li>
 <li><a href="#">About Us ></a></li>
 <ul>
 <li><a href="#">History</a></li>
 <li><a href="#">Letter from The Club President   ></a></li>
 <ul>
 <li><a href="#">2006-2007 Committee</a></li>
 <li><a href="#">Immediate Past Committee</a></li>
 </ul>
 <li><a href="#">Letter from The Consul-General</a></li>
 </ul>
 <li><a href="#">News   ></a></li>
 <ul>
 <li><a href="#">News & Upcoming Events ></a></li>
 <ul>
 <li><a href="#">Monthly Calendar of Events</a></li>
 </ul>
 <li><a href="#">Current News</a></li>
 </ul>
 <li><a href="#">Past Events  ></a></li>
 <ul>
 <li><a href="#">2006</a></li>
 <li><a href="#">2005</a></li>
 <li><a href="#">2004</a></li>
 </ul>
 <li><a href="#">Membership ></a></li>
 <ul>
 <li><a href="#">Types of Membership</a></li>
 <li><a href="#">Benefits</a></li>
 <li><a href="#">Apply Now!</a></li>
 <li><a href="#">Directory ></a></li>
 <ul>
 <li><a href="#">2003-2004</a></li>
 <li><a href="#">2004-2005</a></li>
 <li><a href="#">2005-2006</a></li>
 </ul></ul>
 <li><a href="#">Sponsors</a></li>
 <li><a href="#">Partners</a></li>
 <li><a href="#">Contact Us</a></li>
 <li><a href="#">Site Map</a></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[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].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;
}

.....