Hiya everyone,
I have a problem with my css menu. When you hover over a tab the dropdown list doesn't dropdown underneath the tabs it appears at the right!

Can anyone see where i'm going wrong?
(No site up yet)
Code:
<head>
<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
	var sfEls = document.getElementById("tabs").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);

//--><!]]></script>
<style type="text/css">
body {
font-family: arial, tahoma, sans-serif;
margin:0;
padding:0;
background: #BBD9EE;
font-size: 10pt;
}

#content {
padding:5px;
color:#666666;
background: #ffffff;
}

#contentbackground {
background: #BBD9EE;
padding-left:5px;
padding-right:6px;
padding-bottom:5px;
}

a {
color:#FF9834;
font-weight: bold;
}

a:hover {
text-decoration: none;
}

#topright {
  text-align: right;
  float: right;
  padding-right: 4px;
  background:#BBD9EE;
  line-height:normal;
}



    #tabs {
      float:left;
      width:100%;
      background:#BBD9EE;
      font-size:93%;
      font-weight: bold;
      line-height:normal;
      }
    #tabs ul {
        margin:0;
        padding:4px 0px 0 5px;
        list-style:none;
      }
    #tabs li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabs a {
      float:left;
      background:url("../images/common/tableft.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabs a span {
      font: bold;
      float:left;
      display:block;
      background:url("../images/common/tabright.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#666;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs a span {float:none;}
    /* End IE5-Mac hack */
    #tabs a:hover span {
      color:#FF9834;
      }
    #tabs a:hover {
      background-position:0% -42px;
      }
    #tabs a:hover span {
      background-position:100% -42px;
      }

        #tabs #current a {
                background-position:0% -42px;
        }
        #tabs #current a span {
                background-position:100% -42px;
        }

#tabs li ul { /* second-level lists */
	position: absolute;
	background: #E7F1F8;
	width: 10em;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#tabs li:hover ul, #tabs li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
	position: relative;
	
}
</head>
<body>
<div id="tabs">
<ul>
<li id="current"><a href="index.asp"><span>Home</span></a></li>
  <ul>  
        <li><a href="#">help</a></li> 
        <li><a href="#">contact</a></li> 
      </ul> 

<li><a href="Library.asp"><span>Library</span></a></li>
<li><a href="directorates.asp"><span>Directorates</span></a></li>
<li><a href="Support.asp"><span>Support</span></a></li>
<li><a href="News.asp"><span>News</span></a></li>
<li><a href="About.asp"><span>About</span></a></li>
</ul>
<div id="topright"> 
<a href="accessibility.asp"><span>Accessibility</span></a>
<a href="search.asp"><span>Search</span></a> 
</div>
</div>
</body>
Cheers
Mark