CSS Guidance

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.

[B]HTML [/B]
<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>

[B]CSS Styling[/B]

/*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;}

Also in #CSS _↴