Hello

Can anyone offer me some assistance on how I can modify the following Drop Line Menu. I have updated the Menu so it fit's my requirement and it works really well, however I would like the Drop Line to display on Mouse Over and Hide on Mouse Out. Currently it remains visible unless another Link is selected

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Drop Line Menu</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript" src="iStu1/iStu1.js"></script>

<script>

$(document).ready(function () {
$('#menuHolder ul li a').mouseover(function (event) {
if (this == event.target) {
$(this).parent().toggleClass('clicked');
if ($(this).parent().attr('class').indexOf('clicked') != -1) {
$(this).siblings('ul').animate({"top": "35px"}, {queue:false,duration:(500)}, "swing");
}
else {
$(this).siblings('ul').animate({"top": "0px"}, {queue:false,duration:(500)}, "swing");
}
$(this).parent().siblings().removeClass('clicked').find('ul').animate({"top": "0px"}, {queue:false,duration:(500)}, "swing");
}
})
$('#menuHolder ul li:not(:has(ul)) a').mouseout(function (event) {
if (this == event.target) {
$(this).parent().toggleClass('clicked');
$(this).parent().siblings().removeClass('clicked').find('ul').animate({"top": "0px"}, {queue:false,duration:(500)}, "swing");
}
});
});

</script> 


<style>

#menuHolder {width:950px; height:25px; position:relative; z-index:100;}
#menuHolder ul {width:950px; height:25px; padding:0; margin:0; list-style:none; text-align:center;}
#menuHolder ul {background: #000000;}
#menuHolder ul li {display:inline; margin:0 -4px 0 0;}
#menuHolder ul li a {display:inline-block; padding:2px 15px; font: bold 13px/13px arial, sans-serif; color:#fff; text-decoration:none;}
#menuHolder ul li.clicked > a {color:#ffff00;}
#menuHolder ul li ul {position:absolute; left:0; top:0; z-index:-1; background:transparent;}
#menuHolder ul li ul li a {padding:0 10px; font-size:13px; color:#000000;}
#menuHolder ul li ul li a:hover {color:#0000ff; text-decoration:underline;}

</style>



</head>

<body>
	<div id="menuHolder">
	<ul>
		<li><a href="index.html" title="About Skittle Pins and Balls">ABOUT US</a></li>

		<li><a href="#">PRODUCTS</a>
			<ul>
				<li><a href="#" title="General Information About Our Products">General Information</a></li>
				<li><a href="skittleballs.html" title="Skittle Balls We Manufacture">Skittle Balls</a></li>
				<li><a href="skittlepins.html" title="Skittle Pins We Mnaufacture">Skittle Pins</a></li>
				<li><a href="deals.html" title="Skittle Pin and Ball Deals - Purchase Both And Save Money">Pin and Ball Deals</a></li>
				<li><a href="miniature.html" title="Miniature Skittle Sets">Miniature Skittle Sets</a></li>
				<li><a href="other.html" title="Other Products We Offer">Other Products</a></li>
			</ul>
		</li>

		<li><a href="#">ADVICE AND INFORMATION</a>
			<ul>
				<li><a href="advice.html" title="Advice Before Selecting Your Products">Selection Advice</a></li>
				<li><a href="maintain.html" title="Maintaining your Skittle Equipment">Maintaining your Items</a></li>
				<li><a href="timber.html" title="Statement Regarding Our Timber Quality">Timber Statement</a></li>
				<li><a href="calculator.html" title="Calculate the Dimensions of Your Existing Items">Pin and Ball Size Calculator</a></li>
				<li><a href="#" title="Purchasing Second Hand Items">Purchasing Old Sets</a></li>
			</ul>
		</li>

		<li><a href="#x">ORDERING</a>
			<ul>
				<li><a href="#" title="How To Order your Skittle Equipment">How To Order</a></li>
				<li><a href="#" title="How To Pay For Your Skittle Equipment">How To Pay</a></li>
				<li><a href="#" title="Delivery Options">Delivery Options</a></li>
			</ul>
		</li>

		<li><a href="#x">REGIONAL STYLES</a>
			<ul>
				<li><a href="#" title="Regional Skittle Ball Styles">Skittle Balls</a></li>
				<li><a href="#" title="Regional Skittle Pin Styles">Skittle Pins</a></li>
			</ul>
		</li>
		
		<li><a href="#">CONTACT DETAILS</a>
			<ul>
				<li><a href="#" title="Contact Us Form">Contact Form</a></li>
				<li><a href="#" title="Our Location - How to Final Us">Location</a></li>
			</ul>
		</li>
		
		<li><a href="links.html" title="Links To Other Websites">LINKS</a></li>
	</ul>
</div>

<br><br>
</body>
</html>
Many Thanks