代码如下
复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>学习dl中</title>
<style type="text/css">
dl *
{
margin: 0;
padding: 0;
font-size:12px;
}
dl
{
width: 405px;
height:128px;
border:1px #000 solid;
}
dt
{
width:120px;
height: 32px;
line-height: 32px;
text-align: center;
}
dt a
{
display: block;
text-decoration: none;
}
dt.ing a
{
background:#efefef;
}
dd
{
position: absolute;
display: none;
width:280px;
background-color: #fff;
}
dd li
{
line-height: 16px;
list-style-type: none;
text-align:right;
color:#999;
}
dd li a
{
float:left;
display:inline;
padding-left:5px;
}
dd.ing
{
display: block;
}
dd.no
{
display:none;
}
dd#d1
{
margin-top:-32px;
margin-left:120px;
}
dd#d2
{
margin-top:-64px;
margin-left:120px;
}
dd#d3
{
margin-top:-96px;
margin-left:120px;
}
dd#d4
{
margin-top:-128px;
margin-left:120px;
}
</style>
<script type="text/javascript">
var ddiShow=2;
function show(iShow)
{
document.getElementById(['d'+ddiShow]).className="no";
document.getElementById(['t'+ddiShow]).className="no";
var iShow;
ddiShow=iShow;
document.getElementById(['d'+iShow]).className="ing";
document.getElementById(['t'+iShow]).className="ing";
return false;
}
</script>
</head>
<body>
<dl>
<dt id="t1"><a href="#" onmouseover="return show('1');">测试菜单一</a></dt>
<dd id="d1">
<ol>
<li><a href="#">测试内容(菜单一)</a>1-24</li>
<li><a href="#">测试内容(菜单一)</a>1-24</li>
<li><a href="#">测试内容(菜单一)</a>1-24</li>
<li><a href="#">测试内容(菜单一)</a>1-24</li>
<li><a href="#">测试内容(菜单一)</a>1-24</li>
<li><a href="#">测试内容(菜单一)</a>1-24</li>
<li><a href="#">测试内容(菜单一)</a>1-24</li>
<li><a href="#">测试内容(菜单一)</a>1-24</li>
</ol>
</dd>
<dt id="t2"class="ing"><a href="#"onmouseover="return show('2');">测试菜单二</a></dt>
<dd id="d2" class="ing">
<ol>
<li><a href="#">测试内容(菜单二)</a>1-24</li>
<li><a href="#">测试内容(菜单二)</a>1-24</li>
<li><a href="#">测试内容(菜单二)</a>1-24</li>
<li><a href="#">测试内容(菜单二)</a>1-24</li>
<li><a href="#">测试内容(菜单二)</a>1-24</li>
<li><a href="#">测试内容(菜单二)</a>1-24</li>
<li><a href="#">测试内容(菜单二)</a>1-24</li>
<li><a href="#">测试内容(菜单二)</a>1-24</li></ol>
</dd>
<dt id="t3"><a href="#"onmouseover="return show('3');">测试菜单三</a></dt>
<dd id="d3">
<ol>
<li><a href="#">测试内容(菜单三)</a>1-24</li>
<li><a href="#">测试内容(菜单三)</a>1-24</li>
<li><a href="#">测试内容(菜单三)</a>1-24</li>
<li><a href="#">测试内容(菜单三)</a>1-24</li>
<li><a href="#">测试内容(菜单三)</a>1-24</li>
<li><a href="#">测试内容(菜单三)</a>1-24</li>
<li><a href="#">测试内容(菜单三)</a>1-24</li>
<li><a href="#">测试内容(菜单三)</a>1-24</li></ol>
</dd>
<dt id="t4"><a href="#"onmouseover="return show('4');">测试菜单四</a></dt>
<dd id="d4">
<ol>
<li><a href="#">测试内容(菜单四)</a>1-24</li>
<li><a href="#">测试内容(菜单四)</a>1-24</li>
<li><a href="#">测试内容(菜单四)</a>1-24</li>
<li><a href="#">测试内容(菜单四)</a>1-24</li>
<li><a href="#">测试内容(菜单四)</a>1-24</li>
<li><a href="#">测试内容(菜单四)</a>1-24</li>
<li><a href="#">测试内容(菜单四)</a>1-24</li>
<li><a href="#">测试内容(菜单四)</a>1-24</li></ol>
</dd>
</dl>
</body>
</html>
