<style>
*
{
margin:0px;
padding:0px;}
.aa
{
top: 120px;
left: 120px;
height: 40px;
width: 80px;
position: absolute;
overflow: hidden;
line-height: 40px;
text-align: center;
background-color: #333;
}
.aaa
{
top:120px;
left:120px;
height:40px;
width:80px;
position:absolute;
overflow:visible;
line-height:40px;
text-align:center;
background-color:#F00;
}
.b
{
height:40px;
width:80px;
top:40px;
left:0px;
position:absolute;
overflow:hidden;
background-color:#666;
}
.bb
{
height:40px;
width:80px;
top:40px;
left:0px;
position:absolute;
overflow:visible;
background-color:#FF6;
}
.c
{
height:40px;
width:80px;
top:80px;
left:0px;
position:absolute;
overflow:hidden;
background-color:#999;
}
.cc
{
height:40px;
width:80px;
top:80px;
left:0px;
position:absolute;
overflow:visible;
background-color:#FF9;
}
.d
{
height:40px;
width:80px;
top:120px;
left:0px;
position:absolute;
overflow:hidden;
background-color:#CCC;
}
.dd
{
height:40px;
width:80px;
top:120px;
left:0px;
position:absolute;
overflow:visible;
background-color:#FFC;
}
.e
{
height:110px;
width:90px;
top:0px;
left:80px;
position:absolute;
background-color:#C3C;
}
</style>
</head>
<body>
<div class="aa" onmouseover="this.className='aaa'" onmouseout="this.className='aa'"><font color="#FFFFFF">新闻动态</font>
<div class="b" onmouseover="this.className='bb'" onmouseout="this.className='b'">场景<div class="e"></div></div>
<div class="c" onmouseover="this.className='cc'" onmouseout="this.className='c'">活动<div class="e"></div></div>
<div class="d" onmouseover="this.className='dd'" onmouseout="this.className='d'">杂谈<div class="e"></div></div>
</div>
</body>
