Can't get rid of tables in my horizontal CSS menu

Hi all,

I've got a problem with my CSS/HTML for the navigation element on a site I'm doing. I haven't been able to figure out how to get rid of the tables and I'm sure it can be done.

I'd appreciate some input on this, if you have a sec.

The site is http://www.hsd.state.nm.us/ and the relevent CSS and HTML is below:

* {margin: 0; padding: 0;}
.menu {font-family: "lucida grande", verdana, sans-serif; width:760px; position:relative; font-size:95%;font-weight:bold;text-align:center; color:#333333; }
.menu ul {list-style-type: none; background-image:url(/images/subbackul.gif);background-position:bottom left; background-repeat:no-repeat;}
/*topitem background */.menu ul li {float:left; position:relative; width:152px; }
.menu ul li ul {display: none;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#ffffff; width:152px;}
.menu ul li:hover a {color:#ffffff; }
.menu ul li:hover ul, .menu ul li a:hover ul {display:block; position:absolute; top:50px;left:0; width:152px;}
/*subitem inactive*/.menu ul li:hover ul li a, /*ie bug fix*/ .menu ul li a:hover ul li a {display:block; background-image:url(/images/subback.gif);background-position:top left; background-repeat:no-repeat; color:#333333; width:132px; line-height:1.5em; padding:10px 10px;}
/*subitem hover*/.menu ul li:hover {background-image:url(/images/subbackover.gif);background-position:top left; background-repeat:no-repeat;}
.menu ul li ul li a:hover {background-image:url(/images/subback.gif);background-position:top left;background-repeat:no-repeat;}
.menu ul a {line-height:45px;}
.menu ul li a:hover {background-image:url(/images/spacer.gif); background-position:center left; background-repeat:no-repeat;color:#333333; }
.menu ul li a:hover ul li a:hover {background-image:url(/images/subbackover.gif);background-position:top left; background-repeat:no-repeat;color:#333333; }
#divhome {background-image:url(/images/navtemplateV3_r1_c1.gif); background-position:center left; background-repeat:no-repeat; text-indent:-5000px; height:50px;}
#divnews {background-image:url(/images/navtemplateV3_r1_c2.gif); background-position:center left; background-repeat:no-repeat; text-indent:-5000px; height:50px;}
#divabout {background-image:url(/images/navtemplateV3_r1_c3.gif); background-position:center left; background-repeat:no-repeat; text-indent:-5000px; height:50px;}
#divcontact {background-image:url(/images/navtemplateV3_r1_c4.gif); background-position:center left; background-repeat:no-repeat; text-indent:-5000px; height:50px;}
#divworking {background-image:url(/images/navtemplateV3_r1_c5.gif); background-position:center left; background-repeat:no-repeat; text-indent:-5000px; height:50px;}



<div id="nav">
<div class="menu">
<ul>
<li>
<div id="divhome">
<a href="/" title="Programs and Services for New Mexicans">Home
<!--[if IE 7]><!--></a><!--<![endif]-->
<table summary="Programs and Services for New Mexicans"><tr><td><ul>
<li><a href="/csed/" title="Providing general child support services">Child Support</a></li>
<li><a href="/isd/" title="Providing services such as Food Stamps, temporary cash assistance and low income home energy assistance">Income Support</a></li>
<li><a href="/mad/" title="Ensuring access to medically necessary services for Medicaid-eligible individuals">Medical Assistance</a></li>
</ul></td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</div>
</li>
<li>
<div id="divnews">
<a href="/newsroom/" title="News, Press Releases &amp; Publications">Newsroom
<!--[if IE 7]><!--></a><!--<![endif]-->
<table summary="News, Press Releases &amp; Publications"><tr><td><ul><li><a href="/newsroom/pressreleases/">Press Releases</a></li>
<li><a href="/newsroom/diario.html">El Diario sin Nombre</a></li>
</ul></td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</div>
</li>
<li>
<div id="divabout">
<a href="/about.html" title="HSD Mission, Goals and Values">About <acronym title="Human Services Department">HSD</acronym>
<!--[if IE 7]><!--></a><!--<![endif]-->
<table summary="HSD Mission, Goals and Values"><tr><td><ul>
<li><a href="/asd/">Administrative Services Division</a></li>
<li><a href="/doit/">Division of Information Technology</a></li>
<li><a href="/ohr/">Office of Human Resources</a></li>
<li><a href="/ogc/">Office of General Council</a></li>
<li><a href="/oig/">Office of Inspector General</a></li>
<li><a href="/fhb/" title="(previously Administrative Hearings Bureau)">Fair Hearings Bureau</a></li>
<li><a href="/oos/">Office of the Secretary</a></li>
</ul></td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</div>
</li>
<li>
<div id="divcontact">
<a href="/contact.html" title="HSD Contacts for support and assistance">Contacts
<!--[if IE 7]><!--></a><!--<![endif]-->
<table summary="HSD Contacts for support and assistance"><tr><td><ul>
<li><a href="/contact.html" title="HSD Contacts for support and assistance"><acronym title="Human Services Department">HSD</acronym> Contacts</a></li>
<li><a href="/communications.html" title="Communications">Communications</a></li>
<li><a href="/cons.html" title="Handles constituent inquiries, including Senate and House Chief Clerk offices and Senate and House leadership offices">Constituent Services</a></li>
<li><a href="/oos/nal.html" title="Works with New Mexico's 22 Native American Tribes to foster the government-to-government relationship">Native American Liaison</a></li>
<li><a href="http://www.health.state.nm.us" title="Dept. of Health Web, NM">Dept. of Health, NM</a></li>
<li><a href="http://www.hhs.gov" title="Dept. of Health Web, US">US Dept. of Health &amp; Human Services</a></li>
<li><a href="http://www.newmexico.gov/online_services.php" title="Online Services at NM State Web site">NM Online Services</a></li>
<li><a href="http://www.newmexico.gov" title="State of NM Web site">State of New Mexico</a></li>
</ul></td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</div>
</li>
<li>
<div id="divworking">
<a href="/ohr/" title="What is it like working at HSD?">Working at <acronym title="Human Services Department">HSD</acronym>
<!--[if IE 7]><!--></a><!--<![endif]-->
<table summary="What is it like working at HSD?"><tr><td><ul>
<li><a href="/ohr/jobs.html" title="Lookup open positions &amp; apply.">Job Opportunities</a></li>
<li><a href="/ohr/employees/" title="Review benefits, policies &amp; notices.">Employee Area</a></li>
<li><a href="/ohr/verifyemployment.html" title="Confirm present or past employment at HSD.">Verify Employment</a></li>
<li><a href="/ohr/employees/share/"><acronym title="Statewide Human resource, Accounting, and managerial REporting system">SHARE</acronym></a></li>
</ul></td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</div>
</li>
</ul>
</div>
</div>


I truly would appreciate your help.

Thanks,

Robert Kruger

Not if you expect your drop downs to work in IE without javascript. If you are willing to use JS then yeah you can get rid of them. Its your choice though.

I don't want to use Javascript, I also don't want to use tables. It appears that you're absolutely convinced that these are the only ways to do it. My research (fairly extensive research) suggests you are right, but I'm HOPING against hope that someone knows how to do it.

Hmm after looking at the code a bit more closely it appears that the tables are there for description purposes. Try this
<div id="nav">
<div class="menu">
<ul>
<li>
<div id="divhome"> <a href="/" title="Programs and Services for New Mexicans">Home
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<ul>
<li><a href="/csed/" title="Providing general child support services">Child Support</a></li>
<li><a href="/isd/" title="Providing services such as Food Stamps, temporary cash assistance and low income home energy assistance">Income Support</a></li>
<li><a href="/mad/" title="Ensuring access to medically necessary services for Medicaid-eligible individuals">Medical Assistance</a></li>
</ul>
<!--[if lte IE 6]></a><![endif]-->
</div>
</li>
<li>
<div id="divnews"> <a href="/newsroom/" title="News, Press Releases &amp; Publications">Newsroom
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<ul>
<li><a href="/newsroom/pressreleases/">Press Releases</a></li>
<li><a href="/newsroom/diario.html">El Diario sin Nombre</a></li>
</ul>
<!--[if lte IE 6]></a><![endif]-->
</div>
</li>
<li>
<div id="divabout"> <a href="/about.html" title="HSD Mission, Goals and Values">About <acronym title="Human Services Department">HSD</acronym>
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<ul>
<li><a href="/asd/">Administrative Services Division</a></li>
<li><a href="/doit/">Division of Information Technology</a></li>
<li><a href="/ohr/">Office of Human Resources</a></li>
<li><a href="/ogc/">Office of General Council</a></li>
<li><a href="/oig/">Office of Inspector General</a></li>
<li><a href="/fhb/" title="(previously Administrative Hearings Bureau)">Fair Hearings Bureau</a></li>
<li><a href="/oos/">Office of the Secretary</a></li>
</ul>
<!--[if lte IE 6]></a><![endif]-->
</div>
</li>
<li>
<div id="divcontact"> <a href="/contact.html" title="HSD Contacts for support and assistance">Contacts
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<ul>
<li><a href="/contact.html" title="HSD Contacts for support and assistance"><acronym title="Human Services Department">HSD</acronym> Contacts</a></li>
<li><a href="/communications.html" title="Communications">Communications</a></li>
<li><a href="/cons.html" title="Handles constituent inquiries, including Senate and House Chief Clerk offices and Senate and House leadership offices">Constituent Services</a></li>
<li><a href="/oos/nal.html" title="Works with New Mexico's 22 Native American Tribes to foster the government-to-government relationship">Native American Liaison</a></li>
<li><a href="http://www.health.state.nm.us" title="Dept. of Health Web, NM">Dept. of Health, NM</a></li>
<li><a href="http://www.hhs.gov" title="Dept. of Health Web, US">US Dept. of Health &amp; Human Services</a></li>
<li><a href="http://www.newmexico.gov/online_services.php" title="Online Services at NM State Web site">NM Online Services</a></li>
<li><a href="http://www.newmexico.gov" title="State of NM Web site">State of New Mexico</a></li>
</ul>
<!--[if lte IE 6]></a><![endif]-->
</div>
</li>
<li>
<div id="divworking"> <a href="/ohr/" title="What is it like working at HSD?">Working at <acronym title="Human Services Department">HSD</acronym>
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<ul>
<li><a href="/ohr/jobs.html" title="Lookup open positions &amp; apply.">Job Opportunities</a></li>
<li><a href="/ohr/employees/" title="Review benefits, policies &amp; notices.">Employee Area</a></li>
<li><a href="/ohr/verifyemployment.html" title="Confirm present or past employment at HSD.">Verify Employment</a></li>
<li><a href="/ohr/employees/share/"><acronym title="Statewide Human resource, Accounting, and managerial REporting system">SHARE</acronym></a></li>
</ul>
<!--[if lte IE 6]></a><![endif]-->
</div>
</li>
</ul>
</div>
</div>

Tried that, it doesn't display the subitems when you hover unless it has the table tag there.

I copied and pasted your text to test, and it doesn't work, but to clarify, the change you made was simply to remove the table tr and td tags right?

Anyone? I'm still lost as to what to do here.