jQuery Menu! [Solved]

[attila2452]

The Problem!The issue with this code for my navigation is, for the div (nav) when i hover a link (li) i can only hover the top half to trigger the jQuery to work. But when i hover over the bottom half nothing happense. its a List item still weather its the top or bottom. why is it happening . please help.THE HTML

<div id="nav">	<ul>		<li><a class="home" href="#">Home</a></li>		<li><a class="about" href="#">About</a></li>		<li><a class="media" href="#">Media</a></li>		<li><a class="links" href="#">Links</a></li>		<li><a class="contact" href="#">Contact</a></li>	</ul></div>

THE CSS

#nav{margin:0px;padding:0px;position:absolute;top:35px;left:400px;}#nav ul{margin:0px; padding:0px;}#nav ul li {display:inline;list-style:none;list-style-type:none;line-height:35px;}#nav ul li a{font-family:"Arial";text-decoration:none;color:#EEEEEE;background-color:#94c0c2;padding:12px;line-height:35px;margin:0px;border-top:4px solid #FFFFFF;position:absolute;top:35px;}#nav ul li a:hover{color:#94c0c2; background-color:#275A78; border-top:4px solid #94c0c2;}a.home{position:absolute;left:0px;}a.about{position:absolute;left:67px;}a.media{position:absolute;left:133px;}a.links{position:absolute;left:202px;}a.contact{position:absolute;left:264px;}

THE JQUERY

$(document).ready(function(){//Home	$("a.home").mouseover(function(){	$("a.home").animate({height:60},"fast");	});	$("a.home").mouseout(function(){	$("a.home").animate({height:35},"slow");	});	$("a.home").click(function(){	$("a.home").animate({height:35},"slow");	$("a.home").animate({top:25},"slow");	$("a.home").animate({top:35},"slow");	$("a.home").animate({top:25},"slow");	$("a.home").animate({top:35},"slow");	});	//About	$("a.about").mouseover(function(){	$("a.about").animate({height:60},"fast");	});	$("a.about").mouseout(function(){	$("a.about").animate({height:35},"slow");	});		$("a.about").click(function(){	$("a.about").animate({height:35},"slow");	$("a.about").animate({top:25},"slow");	$("a.about").animate({top:35},"slow");	$("a.about").animate({top:25},"slow");	$("a.about").animate({top:35},"slow");	});  //Media	$("a.media").mouseover(function(){	$("a.media").animate({height:60},"fast");	});		$("a.media").mouseout(function(){	$("a.media").animate({height:35},"slow");	});	$("a.media").click(function(){	$("a.media").animate({height:35},"slow");	$("a.media").animate({top:25},"slow");	$("a.media").animate({top:35},"slow");	$("a.media").animate({top:25},"slow");	$("a.media").animate({top:35},"slow");	});	//Links	$("a.links").mouseover(function(){	$("a.links").animate({height:60},"fast");	});	$("a.links").mouseout(function(){	$("a.links").animate({height:35},"slow");	});		$("a.links").click(function(){	$("a.links").animate({height:35},"slow");	$("a.links").animate({top:25},"slow");	$("a.links").animate({top:35},"slow");	$("a.links").animate({top:25},"slow");	$("a.links").animate({top:35},"slow");	});	//Contact	$("a.contact").mouseover(function(){	$("a.contact").animate({height:60},"fast");	});		$("a.contact").mouseout(function(){	$("a.contact").animate({height:35},"slow");	});	$("a.contact").click(function(){	$("a.contact").animate({height:35},"slow");	$("a.contact").animate({top:25},"slow");	$("a.contact").animate({top:35},"slow");	$("a.contact").animate({top:25},"slow");	$("a.contact").animate({top:35},"slow");	});});

Example: http://attilahajzer.comeze.com/sites/Buisness/The problem was the Content. it was overlapping part of the navigation thats why it didnt work.