3层下拉列表
,1，建3层列表
<title>无标题文档</title>
<style>
*{
margin:0px;
padding:0px;}
.a{
border:0;
height:50px;
width:200px;
top:100px;
left:100px;
background-color:#0C0;
text-align:center;
vertical-align:middle;
overflow:hidden;
line-height:50px;
position:absolute
}
.aa{
border:0;
height:50px;
width:200px;
top:100px;
left:100px;
background-color:#FF6;
text-align:center;
vertical-align:middle;
overflow:visible;
line-height:50px;
position:absolute
}
.b{
border:0 ;
height:50px;
width:200px;
top:50px;
background-color:#636;
text-align:center;
vertical-align:middle;
overflow:hidden;
line-height:50px;
position:absolute
}
.bb{
border:0;
height:50px;
width:200px;
top:50px;
background-color:#93F;
text-align:center;
vertical-align:middle;
overflow:visible;
line-height:50px;
position:absolute
}
.c{
border:0;
height:50px;
width:200px;
top:100px;
background-color:#9FC;
text-align:center;
vertical-align:middle;
line-height:50px;
position:absolute
}
.d{
border:0;
height:50px;
width:200px;
top:150px;
background-color:#F0C;
text-align:center;
vertical-align:middle;
line-height:50px;
position:absolute
}
#b{
border:1px;
height:150px;
width:200px;
top:0px;
left:200px;
text-align:center;
vertical-align:middle;
position:absolute;
}
</style>
</head>
<body>
<div class="a" onmouseover="this.className='aa'" onmouseout="this.className='a'">滚动新闻
<div class="b" onmouseover="this.className='bb'" onmouseout="this.className='b'" >娱乐
<div id="b">
<table cellpadding="0px" cellspacing="0px">
<tr><td bgcolor="#339933" width="200px">2</td></tr>
<tr><td bgcolor="#99FF66" width="200px">4</td></tr>
<tr><td bgcolor="#FF00CC" width="200px">6</td></tr>
</table></div>
</div>
<div class="c">民生</div>
<div class="d">军事</div>
</div>
</div>
