<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0;font-size:14px}
.first>li{height:23px;width:58px;float:left;margin:auto 5px;text-align:center;border:1px solid gray;border-bottom:2px solid brown;line-height:2em;list-style-type:none;}
.first>li>.second>ul{height:142px;width:272px;position:absolute;left:0;top:24px;text-align:left;border:1px solid gray;border-top:2px solid brown;list-style-type:none;padding:5px;z-index:-1;}
.first>li>.second>ul li{line-height:2.5em}
</style>
<script type="text/javascript">
function Head()
{
var b=document.getElementsByName("article");
b[0].style.display="none";
b[1].style.display="block";
b[2].style.display="none";
} function Body()
{
var b=document.getElementsByName("article");
for(var i=0;i<b.length;i++)
{b[i].style.display="none";
b[i].parentNode.style.borderTop="1px solid gray";
b[i].parentNode.style.borderBottom="2px solid brown";
} }function Body1(i)
{var li=i.parentNode;
var div=li.childNodes[3];
div.style.display="block";
li.style.borderTop="1px solid brown";
li.style.borderBottom="2px solid #fff"
}
</script>
</head>
<body onload="Head()">
<div>
<ul class="first">
<li>
<a style="cursor:pointer" onclick="Body();Body1(this);">房产</a>
<div class="second" name="article">
<ul>
<li><a href="#">275万购昌平邻铁三居 总价20万买一居</a></li>
<li><a href="#">200万内购五环三居 140万安家东三环</a></li>
<li><a href="#">北京首现零首付楼盘 53万购东5环50平</a></li>
<li> <a href="#">京楼盘直降5000 中信府 公园楼王现房</a></li>
</ul>
</div>
</li>
<li>
<a style="cursor:pointer" onclick="Body();Body1(this);">家居</a>
<div class="second" name="article">
<ul>
<li><a href="#">40平出租屋大改造 美少女的混搭小窝</a></li>
<li><a href="#">经典清新简欧爱家 90平老房焕发新生</a></li>
<li><a href="#">新中式的酷色温情 66平撞色活泼家居</a></li>
<li><a href="#">瓷砖就像选好老婆 卫生间烟道的设计</a></li>
</ul>
</div>
</li>
<li>
<a style="cursor:pointer" onclick="Body();Body1(this);">二手房</a>
<div class="second" name="article">
<ul>
<li><a href="#">通州豪华3居260万 二环稀缺2居250w甩</a></li>
<li><a href="#">西3环通透2居290万 130万2居限量抢购</a></li>
<li><a href="#">黄城根小学学区仅260万 121平70万抛</a></li>
<li><a href="#">独家别墅280万 苏州桥2居优惠价248万</a></li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>
li的class没用的可以删除，我之前想用.className调用的。