<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script>
$(function(){
$("#iamgecss").toggle(function(){
$(".content").slideDown(200);
},function(){
$(".content").slideUp(400);
});
});
</script>
<style type="text/css">
#iamgecss{position:relative;width:300px;padding: 0px;}
#iamgecss ul{display: none;background:white;border:1px solid #ccc;width:300px;padding: 5px;margin: 0px;list-style: none;}
#iamgecss ul li{padding: 5px 0px;border-bottom:1px dotted #ddd;text-align: left;}
</style>
</head>
<body>
<center>
<div id="iamgecss">jquery的特点
<ul class="content">
<li >jquery是一个javascript库</li>
<li >jquery极大地简化了javascript编程</li>
<li >jquery很容易学习</li>
<li >拥有ajax开发的丰富函数库</li>
</ul>
</div>
</center>
</body>
</html>
上面的toggle可以换成hover是一样的功能，只不过是鼠标移进和移出