jquery 模拟下拉框困惑？？

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.dropdownsty {
height:18px;
width:90px;
position:relative;
background-color:#999;
}
.dropdownsty ul {
list-style:none;
padding:0;
margin:0;
position:absolute;
top:0;
left:0;
z-index:100;
cursor:hand;
}
.dropdownsty ul li {
width:72px;
overflow:hidden;
background-color:#97ae00;
color:#FFF;
display:none;
}
</style><script src="jquery-ui-1.8.2.custom/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
  $("#dropdown").click(function(){$("li").css({display:"block"})})
  $("#selectop").mouseout(function(){$("li").css({display:"none"})})
}); 
</script>
</head>
<body>
<div  class="dropdownsty">
<dl id="dropdown"><dt>单击显示</dt></dl>
  <ul id="selectop">
    <li><a href="#">aaaaaaaaaa</a></li>
    <li><a href="#">aavvvvvaa</a></li>
    <li><a href="#">aaddddddd</a></li>
  </ul>
</div>
</body>
</html>jquery库就高手自己加载了！我希望得到的效果是菜单效果,当鼠标移开a链接后所有li隐藏。说白了就是个菜单我想按这个思路能否实现，