<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#mydiv
{
background-color:Lime;
display:none;
width:100px;
height:20px;
border:1px solid;
position: absolute;
top: 10px;
left: 100px;
}
#mydiv1
{
background-color:Lime;
display:none;
width:100px;
height:20px;
border:1px solid;
position: absolute;
top: 30px;
left: 100px;
}
<%-- li
{
float :left;
}--%>
</style>
<script type="text/javascript">
var id;
var sheid;
function display() {
document.getElementById('mydiv').style.display = 'block';
}
function exedisplay() {
clearTimeout(sheid);
id=setTimeout(display,1000);
}
function undisplay() {
document.getElementById('mydiv').style.display = 'none';
}
function displayshe() {
document.getElementById('mydiv1').style.display = 'block';
}
function exedisplayshe() {
clearTimeout(id);
sheid=setTimeout(displayshe, 1000);
}
function undisplayshe() {
document.getElementById('mydiv1').style.display = 'none';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ul >
<li> <a href="#" οnmοuseοver="exedisplay();" οnmοuseοut="undisplay();">老鼠</a></li>
<li><a href="#" οnmοuseοver="exedisplayshe();" οnmοuseοut="undisplayshe();">蛇</a></li>
</ul>
<div id="mydiv" >老鼠是害虫</div>
<div id="mydiv1">可怕的东东</div>
</form>
</body>
</html>