<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>overflow运用</title>
<style type="text/css">
dl {
height:16px;
overflow:hidden;
}
.open {
overflow:visible;
}
.close {
overflow:hidden;
}
</style>
<script type="text/javascript">
function onoff() {
var dtNode = event.srcElement;
var dlNode = dtNode.parentNode;
if (dlNode.className == "open") {
dlNode.className = "close";
} else {
dlNode.className = "open";
}
</script>
</head>
<body>
<div style="background-color:#E3E59E; width:300px;">
<dl>
<dt onClick="onoff()">一、上层项目，点我展开和关闭</dt>
<dd>下层项目就这些了就是这些了</dd>
<dd>下层项目就这些了就是这些了</dd>
<dd>下层项目就这些了就是这些了</dd>
<dd>下层项目就这些了就是这些了</dd>
</dl>
<dl>
<dt onClick="onoff()">二、上层项目，点我展开和关闭</dt>
<dd>下层项目就这些了就是这些了</dd>
<dd>下层项目就这些了就是这些了</dd>
<dd>下层项目就这些了就是这些了</dd>
<dd>下层项目就这些了就是这些了</dd>
</dl>
</div>
</body>
</html>
问题：为什么我点 一 展开的时候，会把 二 给遮住，我看视频里的老师做的却没有这个问题，随着一的展开，二也自动向下移动，请问，我这个要怎么改？
水货们都不要水了，来帮下忙
<html>
<head>
<meta charset="utf-8">
<title>overflow运用</title>
<style type="text/css">
dl {
height:16px;
overflow:hidden;
}
.open {
overflow:visible;
}
.close {
overflow:hidden;
}
</style>
<script type="text/javascript">
function onoff() {
var dtNode = event.srcElement;
var dlNode = dtNode.parentNode;
if (dlNode.className == "open") {
dlNode.className = "close";
} else {
dlNode.className = "open";
}
</script>
</head>
<body>
<div style="background-color:#E3E59E; width:300px;">
<dl>
<dt onClick="onoff()">一、上层项目，点我展开和关闭</dt>
<dd>下层项目就这些了就是这些了</dd>
<dd>下层项目就这些了就是这些了</dd>
<dd>下层项目就这些了就是这些了</dd>
<dd>下层项目就这些了就是这些了</dd>
</dl>
<dl>
<dt onClick="onoff()">二、上层项目，点我展开和关闭</dt>
<dd>下层项目就这些了就是这些了</dd>
<dd>下层项目就这些了就是这些了</dd>
<dd>下层项目就这些了就是这些了</dd>
<dd>下层项目就这些了就是这些了</dd>
</dl>
</div>
</body>
</html>
问题：为什么我点 一 展开的时候，会把 二 给遮住，我看视频里的老师做的却没有这个问题，随着一的展开，二也自动向下移动，请问，我这个要怎么改？
水货们都不要水了，来帮下忙
