jquery实现鼠标经过显示对应的层

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function(){
for(i=0;i<4;i++)
{$("li:eq("+i+")").hover(function(){$(this).css("background","#ff0000");$("#id"+i).show();},function(){$(this).css("background","#ffffff");$("#id"+i).hide();});
}})
</script>
<style type="text/css">
li{
text-align:center;width:30px;
font-size:12px;
list-style-type:none;
float:left}
</style>
</head><body><div>
<ul>
<li>  新闻  </li>
<li>  体育  </li>
<li>  娱乐  </li>
<li>  政治  </li>
</ul>
</div>
<Div id="id0">11111111</Div>
<Div id="id1" style="display:none ">22222222</Div>
<Div id="id2"style="display:none ">33333333</Div>
<Div id="id3"style="display:none ">44444444</Div>
</body>
</html>
大家看看我这种思路对吗，不知道为什么鼠标经过新闻， 体育，娱乐，政治没反应呢