CSS Guidance

[alshoh01]

I am attempting to create a horizontal tab menu with submenu's. I'm pretty close to the final product but got stuck on the position of the secondary menu items. The secondary submenu items are just links with a different background but the links are too close to the main tabs. Below is the HTML and the CSS code I'm working on. Any help would be greatly appreciated.

HTML
<div class="menu-topnav">
<ul id="menulist_root-topnav" class="mainlevel-topnav" >
<li><a href="" class="mainlevel_current-topnav" id="active_menu-topnav"><span><span><span>Home</span></span></span></a>
<ul id="menulist_1-topnav">
<li><a href="" class="sublevel-topnav"><span><span><span>News</span></span></span></a></li>
<li><a href="" class="sublevel-topnav"><span><span><span>Blog</span></span></span></a></li>
</ul></li>
<li><a href="" class="mainlevel-topnav"><span><span><span>MyJSAS</span></span></span></a></li>
<li><a href="" class="mainlevel-topnav"><span><span><span>Links</span></span></span></a></li>
<li><a href="" class="mainlevel-topnav"><span><span><span>Search</span></span></span></a></li>
<li><a href="" class="mainlevel-topnav"><span><span><span>Wrapper</span></span></span></a></li>
</ul> </div>

CSS Styling

/*Main menu styling and layout */
a.mainlevel-topnav, a.mainlevel-topnav:visited, a.mainlevel-topnav:link,a.mainlevel_current-topnav, a.mainlevel_current-topnav:visited, a.mainlevel_current-topnav:link, a.mainlevel_active-topnav, a.mainlevel_active-topnav:link, a.mainlevel_active-topnav:visited { font:10px verdana; font-weight:bold; text-align: center; text-decoration: none;}
ul.mainlevel-topnav {position: relative; width: 100%; margin: 0; padding: 0; white-space: nowrap; list-style-type: none; margin:0; padding:0; float:left;}
ul.mainlevel-topnav ul { position: absolute; width: 775px; background: url(../images/tab-hover_bg.gif) repeat-x; height: 1.75em; left: 0; border-bottom:1px solid #ccc; padding: 0; white-space: nowrap; margin: 0;}
ul.mainlevel-topnav li {float: left; margin: 0 0 0 2px; list-style-type: none; padding:0; }
a.mainlevel-topnav:hover, a.mainlevel_current-topnav:hover, a.mainlevel_active-topnav:hover {text-decoration:underline;}
/*Main Menu colors */
a.mainlevel-topnav, a.mainlevel-topnav:visited, a.mainlevel-topnav:link {background-color:#990000; color:#ffffff;}
/*Active Main Menu */
a.mainlevel_current-topnav, a.mainlevel_current-topnav:visited, a.mainlevel_current-topnav:link, a.mainlevel_active-topnav, a.mainlevel_active-topnav:link, a.mainlevel_active-topnav:visited {background: url(../images/tab-hover_bg.gif) repeat-x; color:#003DB8;}
/*Sub Menu Colors */
a.sublevel-topnav, a.sublevel-topnav:visited, a.sublevel-topnav:link, a.sublevel_current-topnav, a.sublevel_current-topnav:link, a.sublevel_current-topnav:visited { color:#003DB8; text-decoration:underline; padding: 1em 1em 0 1em;}
/* Submenu styling and layout */
a.sublevel-topnav, a.sublevel-topnav:visited, a.sublevel-topnav:link, a.sublevel_current-topnav, a.sublevel_current-topnav:link, a.sublevel_current-topnav:visited{width: auto; padding: 1em 1em 0 1em; border: 0; text-decoration:underline; font:77% verdana;}
a.sublevel-topnav:hover, a.sublevel_current-topnav:hover {color:#990000;}
/* List Layout */
a.mainlevel-topnav, a.mainlevel-topnav:visited, a.mainlevel-topnav:link,a.mainlevel_current-topnav, a.mainlevel_current-topnav:visited, a.mainlevel_current-topnav:link, a.mainlevel_active-topnav, a.mainlevel_active-topnav:link, a.mainlevel_active-topnav:visited, a.mainlevel-topnav:hover, a.mainlevel_current-topnav:hover, a.mainlevel_active-topnav:hover, span.mainlevel-topnav { text-align:center; margin: 0; margin-right:2px; display:block; border:none; padding:0;}
/* Rounded Corners inactive main tabs */
ul.mainlevel-topnav li a.mainlevel-topnav span { background: url(../images/bg_nav_cnrl-orig.gif) no-repeat; background-position:left-position; display:block; margin:0; padding:0; }
ul.mainlevel-topnav li a.mainlevel-topnav span span {background:url(../images/bg_nav_cnrr-orig.gif) no-repeat top right; padding:5px; padding-top:3px; padding-bottom: 3px;}
/* Rounded Corners active main tabs */
ul.mainlevel-topnav li a.mainlevel_current-topnav span, ul.mainlevel-topnav li a.mainlevel_active-topnav span {background: url(../images/bg_nav_cnrl_on.gif) no-repeat; background-position:left-position; display:block; margin:0; padding:0;}
ul.mainlevel-topnav li a.mainlevel_current-topnav span span, ul.mainlevel-topnav li a.mainlevel_active-topnav span span {background:url(../images/bg_nav_cnrr_on200.gif) no-repeat top right; padding:7px; padding-top:3px; padding-bottom: 3px;}

[ray326]

Lots of errors in the HTML. Give us a link.

[alshoh01]

Unfortunately this is on a development server. Its a little challenging to put it on a live server because the html is dynamically generated. I can try and put it up but it'll take me a little bit.

What html errors do you see?

Thanks for your help!!

-H

[ray326]

Looked like list nesting problems but probably not. All the extraneous crap like the nested spans and such make it hard for me to read. Just put an example rendered page out, not the ability to render it.