I'm trying to accomplish a two-level horizontal menu that employs semantically correct XHTML. The second <ul> of navigation should be nested in the appropriate <li> tag of the main navigation. This would make sense to screen readers, etc.

However, I can't seem to accomplish this and maintain my layout. The second level of navigation (nested <ul>) breaks the first <ul> into pieces. I was thinking I could take the second <ul> out of flow with absolute positioning, but I can't get it to work.

Anyone have any luck with a layout like this?

Here's my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Hydro Template</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
text-align: center;
line-height: 1.5em;
color: #000;
font-size: x-small; /* IE5 Win */
voice-family: "\"}\"";
voice-family: inherit;
font-size: small;
}
html>body { /* be nice to Opera */
font-size: small;
}
body#home #company_sub,
body#home #services_sub,
body#home #federal_sub,
body#home #projects_sub,
body#home #publications_sub,
body#home #news_sub,
body#home #search_sub {
display: none;
}
body#company #home_sub,
body#company #services_sub,
body#company #federal_sub,
body#company #projects_sub,
body#company #publications_sub,
body#company #news_sub,
body#company #search_sub {
display: none;
}
body#services #home_sub,
body#services #company_sub,
body#services #federal_sub,
body#services #projects_sub,
body#services #publications_sub,
body#services #news_sub,
body#services #search_sub {
display: none;
}
body#federal #home_sub,
body#federal #company_sub,
body#federal #services_sub,
body#federal #projects_sub,
body#federal #publications_sub,
body#federal #news_sub,
body#federal #search_sub {
display: none;
}
body#projects #home_sub,
body#projects #company_sub,
body#projects #services_sub,
body#projects #federal_sub,
body#projects #publications_sub,
body#projects #news_sub,
body#projects #search_sub {
display: none;
}
body#publications #home_sub,
body#publications #company_sub,
body#publications #services_sub,
body#publications #federal_sub,
body#publications #projects_sub,
body#publications #news_sub,
body#publications #search_sub {
display: none;
}
body#news #home_sub,
body#news #company_sub,
body#news #services_sub,
body#news #federal_sub,
body#news #projects_sub,
body#news #publications_sub,
body#news #search_sub {
display: none;
}
body#search #home_sub,
body#search #company_sub,
body#search #services_sub,
body#search #federal_sub,
body#search #projects_sub,
body#search #publications_sub,
body#search #news_sub {
display: none;
}

#wrap {
padding: 0;
border: 1px solid #ccc;
position: relative;
margin: 0 auto;
font-size: 95%;
text-align: left;
width: 781px;
voice-family: "\"}\"";
voice-family: inherit;
width: 761px;
}
html>body #wrap {
width: 761px;
}
#logo {
height: 76px;
text-indent: -5000px;
background: url(img/header.jpg) no-repeat;
margin: 0;
}
#main_menu {
float: left;
width: 767px;
voice-family: "\"}\"";
voice-family: inherit;
width: 761px;
margin: 0 0 -1px 0;
padding: 3px 0;
list-style: none;
font-size: 90%;
text-transform: uppercase;
}
html>body #main_menu {
width: 761px;
}
#main_menu li {
display: inline;
margin: 0;
padding: 0;
list-style: none;
}
#main_menu a {
padding: 6px 12px 6px 12px;
text-decoration: none;
font-weight: bold;
}
#main_menu a.selected, #main_menu a:hover{
color: #ffc;
background: #042d67;
}
#submenu ul {
margin: 0;
padding: 4px 0 3px 0;
clear: both;
list-style: none;
background: #9cf url(img/sub_menu.jpg) repeat-x top left;
}
#submenu li {
display: inline;
margin: 0;
padding: 0;
list-style: none;
}
#submenu a {
padding: 0 12px;
color: #fff;
text-decoration: none;
font-weight: bold;
}
#submenu a:active {
color: #ffc;
}

#content {
/*border: 1px solid #000;*/
clear: left;
}
#footer {
/*border: 1px solid #000;*/
background: #ccc url(img/footer.jpg) repeat-x;
height: 52px;
}
</style>
</head>
<body id="services">
<div id="wrap">
<h1 id="logo">Hydrosphere Resource Consultants</h1>
<ul id="main_menu">
<li><a href="#">Home</a></li>
<li><a href="#" class="selected">Company</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Federal Contracting</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Publications</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Search</a></li>
</ul>
<div id="submenu">
<ul id="home_sub">
</ul>
<ul id="company_sub">
<li><a href="#">Overview</a></li>
<li><a href="#">Staff</a></li>
<li><a href="#">Employment</a></li>
<li><a href="#">Hydrodata</a></li>
</ul>
<ul id="services_sub">
<li><a href="#">Water Resource Engineering</a></li>
<li><a href="#">Water Resource Planning and Management</a></li>
<li><a href="#">Environmental Quality</a></li>
<li><a href="#">Cross Discipline</a></li>
</ul>
<ul id="federal_sub">
</ul>
<ul id="projects_sub">
</ul>
<ul id="publications_sub">
</ul>
<ul id="news_sub">
</ul>
<ul id="search_sub">
</ul>
</div>
<div id="content">
Content
</div>
<div id="footer">
</div>
</div>
</body>
</html>