Drop Down Menu

[duckboy1981]

Im trying to do a dropdown using HTML and CSS. I can get the menu to appear and hide as required but I'm having trouble with the positioning and styling - For some reason the menu is apearing at the end of the row of tabs rather than under the correct tab and I am using spanning but the right hand image will not apear for some reason. Any help greatly aprciated.

CSS -

/* Tabs */
#tabs ul 
{
 margin: 0;
 padding: 0;
 list-style: none;
}

#tabs li 
{
 display: inline;
 list-style: none;
 position: relative;
 width: 10em;
}

#tabs a 
{
 background-image: url("img/tableftC.gif");
 background-repeat: no-repeat;
 background-position: left top;
 float: left;
 font-size: 0.9em;
 font-weight: bold;
 font-family: sans-serif;
 margin-right: 3px;
 padding-left: 4px;
 text-decoration: none;
}

#tabs a span 
{
 float: left;
 display: block;
 background-image: url("img/tabrightC.gif");
 background-repeat: no-repeat;
 background-position: right top;
 padding-top: 5px;
 padding-right: 10px;
 padding-bottom: 5px;
 padding-left: 6px;
 color: #608AAA;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span 
{
 float: none;
}

/* End IE5-Mac hack */
#tabs a:hover 
{
 background-position: 0% -42px;
}

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

#tabs li.current_page_item a 
{
 color: #47A;
 background-position: 0% -42px;
}

#tabs li.current_page_item a span 
{
 background-position: 100% -42px;
}

#tabs li ul 
{
 display: none;
 position: absolute;
 left: 0;
 background-color: transparent;
 background-repeat: no-repeat;
 background-position: left top;
 font-color: #000;
}

li>ul 
{
 top: auto;
 left: auto;
}

#tabs li ul a 
{
 background-image: url("img/tableftC_3.gif");
 background-repeat: no-repeat;
 background-position: top left;
 color: #000;
 padding-top: 5px;
 padding-right: 10px;
 padding-bottom: 5px;
 padding-left: 8px;
}

#tabs li ul a span 
{
 background-image: url("img/tabrightC_3.gif");
 background-position: right top;
 background-repeat: none;
 position: relative;
}

#tabs li:hover ul, #tabs li.over ul 
{
 display: block;
 position: absolute;
 left: 0;
 top: 25px;
 width: 13em;
 background-position: 100% -42px;
}

#tabs li ul a:hover, #tabs li ul a.over 
{
 background-position: 100% -42px;
 color: Black;
}

HTML -

<div id="tabs">
    <ul id="nav">
        <li class="current_page_item"> <ahref="index.html"><span>News</span></a></li>
<li><a href="quality_home.html"><span>Quality</span></a>
					<ul>
						<li><a href="quality_agriculturalprecedents.html">Agricultural Precedents</a><li>
						<li><a href="quality_landregistry1.html">Land Registry Forms</a><li>
						<li><a href="quality_childsupport.html">Child Support</a><li>
					</ul>
				</li>
				<li><a href="precedents_home.html"><span>Precedents</span></a></li>
				<li><a href="marketing.html"><span>Marketing</span></a></li>
				<li><a href="community.html"><span>Community</span></a></li>
				<li><a href="ddbay.html"><span>DD Bay</span></a></li>
				<li><a href="tell_partners.html"><span>Tell the Partners</span></a></li>				
			</ul>

			<div class="clearer">&nbsp;</div>

		</div>