<!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>
*{
marign: 0;
padding: 0;
}
.box{
width: 500px;
height: 100px;
margin: 0 auto;
}
li{
width: 50px;
height: 30px;
border: solid #000 1px;
float: left;
list-style: none;
margin-right: 15px;
}
.showmenu{
border: #000 solid 1px;
width: 200px;
display: none;
}
</style>
<script>
function getByClass(cls){
var eles = [];
var elements = document.getElementsByTagName('*');
for(var i = 0; i < elements.length; i++){
if(elements[i].className == cls){
eles.push(elements[i]);
}
}
return eles;
}
window.onload = function(){
var s = getByClass('li');
s.onmouseover = changeshow;
s.onmouseout = noneshow;
}
function changeshow(){
var p = getByClass('showmenu');
p.style.display = "";
}
function noneshow(){
var p = getByClass('showmenu');
p.style.display = "none";
}
</script>
</head>
<body>
<div class="box">
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
<li>菜单5</li>
</ul>
</div>
<div class="showmenu">
<div class="show1">
鼠标经过li标签后应该显示的
</div>
</div>
</body>
</html>
MarlboroKay
七彩方糖
redrain_lin