jQuery Slide Down Nav Help

Hi,
I have a navigation bar with images as the buttons with no text on them. I'm trying to make a simple slide down menu on hover so people know which pages those images will direct them to: eg 'home', 'about', etc... However, I can't seem to get it to work. Nothing is showing on my hover effect. I'd also like the drop down to stay there until the mouse move's off of the image. Here's the code I have so far:

<script type="text/javascript">
		$(document).ready(function() {
			$(".toolTips").hover(function() {
			if($(".toolTips span").is("none")) {
				$(this).animate({margin-top: "2em"}, 500);
				$(this).show();
				},else {
					$(".toolTips span").css({display: "none"});
				});
				});
			});
		</script>

<div id="nav">
						<ul>
							<li class="home"><a class="toolTips" href="#">home<span>Home</span></a></li>
							<li class="about"><a class="toolTips" href="#">about<span>About Me</span></a></li>
							<li class="contact"><a class="toolTips" href="#">contact<span>Contact Me</span></a></li>				
                    	</ul>

.toolTips {
 z-index: 999999;
 position: fixed;
}

.toolTips span {
 text-indent: 0;
 text-align: center;
 display: none;
 -moz-border-radius: 4px;
 font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
 background: #171717;
 padding-top: 2em;
 padding-bottom: 2em;
 width: 100px;
 height: 30px;
}

Any help would be appreciated, thanks.