jquery show-hide toggle

Starting with the script =

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){
$(".departDates li").hover(function () {
$(this).children(".showFlightPopup").toggle("slow");
});
});

</script>

CSS =

<style type="text/css">
.departDates{
border-top: 2px dotted #6c6c6c;
padding: 10px 0;
line-height: 18px;
overflow: hidden;
}
.departDates .showFlightPopup{
width: 150px;
border: 1px #d7d7d7 solid;
position: absolute;
background: #fff;
margin: 0 0 0 40px;
display: none;
}
</style>

And the markup
<ul class="departDates">
<li>
<h3>Some text</h3>
<input type="button" value="search" />
<div class="showFlightPopup">
<img src="images/imageName.jpg" width="131" height="30" alt="" title="" />
<label>Some Content</label>
</div>
</li>
<li>
<h3>Some text</h3>
<input type="button" value="search" />
<div class="showFlightPopup">
<img src="images/imageName.jpg" width="131" height="30" alt="" title="" />
<label>Some Content</label>
</div>
</li>
</ul>