纯CSS网页选项卡效果,CSS、DIV

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<style>
* {margin:0;padding:0}
ul {list-style:none}
#mm {
margin:50px;
position:relative;
border:1px solid #f00;
width:600px;
height:310px
}
div {
border-bottom:1px solid #f00;
float:left;
text-align:center;
width:200px;
height:30px
}
div a {
width:200px;
height:30px;
line-height:30px;
display:block;
background:#f9f9f9
}
a:hover {
background:#f00
}
div table {
width:600px;height:300px;
visibility:hidden;
position:absolute;top:30px;left:0px
}
#d1:hover #t1,.a1:hover #t1,#d2:hover #t2,.a2:hover #t2,#d3:hover #t3,.a3:hover #t3 {
visibility:visible
}
#t1 a,#t2 a,#t3 a {
background:#fff
}
</style>
<div id="mm">
<div id="d1">
<a href="#" class="a1">美女<table id="t1"><tr><td>
<ul>
<li><a href="http://www.baidu.com">11111111111111111</a></li>
<li><a href="http://www.baidu.com">11111111111111111</a></li>
<li><a href="http://www.baidu.com">11111111111111111</a></li>
<li><a href="http://www.baidu.com">11111111111111111</a></li>
<li><a href="http://www.baidu.com">11111111111111111</a></li>
<li><a href="http://www.baidu.com">11111111111111111</a></li>

</ul></td></tr></table>
</a></div>

<div id="d2">
<a href="#" class="a2">美女<table id="t2"><tr><td>
<ul>
<li><a href="http://www.baidu.com">2222222222222222222</a></li>
<li><a href="http://www.baidu.com">2222222222222222222</a></li>
<li><a href="http://www.baidu.com">2222222222222222222</a></li>
<li><a href="http://www.baidu.com">2222222222222222222</a></li>
<li><a href="http://www.baidu.com">2222222222222222222</a></li>
</ul></td></tr></table>
</a></div>

<div id="d3">
<a href="#" class="a3">美女<table id="t3"><tr><td>
<ul>
<li><a href="http://www.baidu.com">333333333333333333333</a></li>
<li><a href="http://www.baidu.com">333333333333333333333</a></li>
<li><a href="http://www.baidu.com">333333333333333333333</a></li>
<li><a href="http://www.baidu.com">333333333333333333333</a></li>
<li><a href="http://www.baidu.com">333333333333333333333</a></li>
<li><a href="http://www.baidu.com">333333333333333333333</a></li>
</ul></td></tr></table>
</a></div>
</div>