复制以下代码
<!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>
*{ margin:0; padding:0;}
body{ font:Arial, Helvetica, sans-serif; font-size:12px;}
a{ text-decoration:none;}
.mainNav{ width:200px; border:1px solid #039; margin:0 auto; background:#FCF;}
.mainNav dl dt{ border-bottom:1px solid #039;}
.mainNav dl dt h1{ height:30px; line-height:30px; font-size:14px; cursor:pointer;text-align:center;}
.mainNav dl dt span{ display:none;}
.mainNav dl dt a:hover { cursor:pointer;}
.mainNav dl dt a:hover span{ display:block; border-right:1px solid #0039;}
</style>
</head>
<body>
<p>不要小看这句哦：<span style="color:#f00;">.mainNav dl dt a:hover { cursor:pointer;}</span>用hover的时候，是它兼容了ie6呢！！</p>
<div class="mainNav">
<dl>
<dt>
<a href="#">
<h1>HTML是什么呢</h1>
<span>HTMl是超文本标记语言，它是什么巴厘岛来房间饿哦HTMl是超文本标记语言，它是什么巴厘岛来房间饿哦HTMl是超文本标记语言，它是什么巴厘岛来房间饿哦HTMl是超文本标记语言，它是什么巴厘岛来房间饿哦</span>
</a>
</dt>
<dt>
<a href="#">
<h1>XHTML是什么呢</h1>
<span>HTMl是超文本标记语言，它是什么巴厘岛来房间饿哦HTMl是超文本标记语言，它是什么巴厘岛来房间饿哦HTMl是超文本标记语言，它是什么巴厘岛来房间饿哦HTMl是超文本标记语言，它是什么巴厘岛来房间饿哦</span>
</a>
</dt>
<dt>
<a href="#">
<h1>XML是什么呢</h1>
<span>HTMl是超文本标记语言，它是什么巴厘岛来房间饿哦HTMl是超文本标记语言，它是什么巴厘岛来房间饿哦HTMl是超文本标记语言，它是什么巴厘岛来房间饿哦HTMl是超文本标记语言，它是什么巴厘岛来房间饿哦</span>
</a>
</dt>
<dt>
<a href="#">
<h1>CSS是什么呢</h1>
<span>HTMl是超文本标记语言，它是什么巴厘岛来房间饿哦HTMl是超文本标记语言，它是什么巴厘岛来房间饿哦HTMl是超文本标记语言，它是什么巴厘岛来房间饿哦HTMl是超文本标记语言，它是什么巴厘岛来房间饿哦</span>
</a>
</dt>
</dl>
</div>
</body>
</html>
