超链接 鼠标移入 出现div 鼠标移除 div消失

这几天在做jsp项目，想做个首页菜单能鼠标移入 出现div 鼠标移除 div消失，要用js来做，但又不熟悉js，网上找了几天，找到的也看不懂是啥东西，于是，只能苦搞啊，……游戏………游戏声伴随………在搞…………，终于，一边百度一边自己做，效果出来了，现在把代码附上，希望能帮到像我这样的菜鸟，免些伤神，
<!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" />
<title>无标题文档</title>
<style>
.top_sdiv_gou {
width: 90px;
height: 20px;
font-size: 20px;
text-align: center;
border: 1px solid #ff4200;
}.top_sdiv_gou a {
text-decoration: none;
color: black;
font-size: 13px;
}.top_sdiv_gou a:hover {
color: red;
text-decoration: underline;
}.top_sdiv_gou a:active {
text-decoration: underline;
color: red;
}.win {
padding: 20px 0px 0px 20px;
width: 320px;
height: 100px;
display: none;
border: 1px solid #ff4200;
background-color: #ffffff;
text-align: center;
font-size: 12px;
}.divtitle {
border: 1px solid #ffffff;
text-align: left;
clear: both;
}.identitytitle {
border: 1px solid #ffffff;
}.identitytitle div {
height: 24px;
text-align: center;
padding: 5px 0px 0px 10px;
border: 1px solid #ffffff;
float: left;
}.identitytitle a:link {
text-decoration: none;
}.identitytitle a:hover {
text-decoration: underline;
color: red;
}.divtitle a:link {
color: red;
text-decoration: none;
}.divtitle a:active {
text-decoration: none;
color: red;
}.divtitle a:hover {
text-decoration: underline;
color: red;
}
</style>
<script>
function show(ico, id) {
var objs = document.getElementById(id).style;
objs.left = ico.offsetLeft + ico.offsetWidth;
objs.top = ico.offsetTop;
objs.display = 'block';
}function closeItem(id){
var x = window.event.clientX;
var y = window.event.clientY;
var div = document.getElementById(id);
var divx1 = div.offsetLeft;
var divy1 = div.offsetTop;
var divx2 = div.offsetLeft + div.offsetWidth-2;
var divy2 = div.offsetTop + div.offsetHeight-2;
var objs2 = document.getElementById(id).style;
if( x < divx1 || x > divx2 || y < divy1 || y > divy2){
objs2.display = 'none';
};
}
</script>
</head>
<body>
<div class="top_sdiv_gou" onmouseover="show(this,'div1')" onmouseout="closeItem('div1')">
<a href="javascript:void(0);" target="_blank" >文学小说</a>
</div> <div id="div1" class="win" onmouseout="closeItem('div1')">
<div class="divtitle">
<strong><a href="">文学</a> </strong>
</div>
<div class="identitytitle">
<div>
<a href="FindNewBook" target="_blank">现代/当代文学</a>
</div>
<div>
<a href="" target="_blank">中国古诗词</a>
</div>
<div>
<a href="" target="_blank">文学其它</a>
</div>
</div> <div class="divtitle">
<strong><a href="">小说</a> </strong>
</div>
<div class="identitytitle">
<div>
<a href="" target="_blank">都市/情感小说</a>
</div>
<div>
<a href="" target="_blank">恐怖/惊悚小说</a>
</div>
<div>
<a href="" target="_blank">乡土小说</a>
</div>
<div>
<a href="" target="_blank">其它小说</a>
</div>
</div>
</div>
</body>
</html>