<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单的下拉框</title>
<style>
* {
padding: ;
margin: ;
}
.main {
width: 1200px;
height: 300px;
margin: auto;
}
h3 {
margin-left: 20px;
background-color: #;
}
.dis {
float: left;
}
li {
list-style: none;
margin-left: 30px;
margin-top: 10px;
}
ul {
display: none;
margin-left: 19px;
background-color: #;
}
</style>
</head>
<body>
<div class="main">
<div class="dis">
<h3 onmouseover="one(0)">z选项一</h3>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="dis">
<h3 onmouseover="one(1)">z选项二</h3>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="dis">
<h3 onmouseover="one(2)">z选项三</h3>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="dis">
<h3 onmouseover="one(3)">z选项四</h3>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script>
function one(num){
var objs = document.getElementsByTagName("ul");
for(var i = ; i < objs.length;i ++) {
if (i == num) {
objs[i].style.display = "block";
}else {
objs[i].style.display = "none";
}
}
}
</script>
</body>
</html>