布局
<div class="clips">
<ul class="topic">
<li class="active"><a class="set" href="#">Task<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><img src="Images/blgblk1.jpg" alt="" title="" /></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="set" href="#">Jotting<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><img src="Images/blgblk2.jpg" alt="" title="" /></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="set" href="#">Project<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><img src="/img/blgblk3.jpg" alt="" title="" /></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="set" href="#">Group<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><img src="/img/blgblk4.jpg" alt="" title="" /></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="set" href="#">Community<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><img src="/img/blgblk5.jpg" alt="" title="" /></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="set" href="#">Wanted<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><img src="/img/blgblk6.jpg" alt="" title="" /></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
CSS控制
<style type="text/css">
.clips {width:684px; text-align:left; position:relative; margin:10px 0 0 5px;}
.clips ul.topic {padding:0; margin:0; list-style:none; width:684px; height:auto; position:relative; z-index:10;}
.clips ul.topic li {display:block; width:114px; height:31px; float:left;}
.clips ul.topic li a.set {display:block; font-size:14px; width:111px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; background:url(/img/greengrad.png) repeat-x; border:1px solid #71bc10; border-width:1px 1px 1px 1px; font-family:verdana, arial, sans-serif;}
.clips ul.topic li a ul,
.clips ul.topic li ul
{display:none;}
.clips ul.topic li.active a
{color:#000; background:url(/img/greengrad.png) repeat-x; border:1px solid #71bc10; border-width:1px 1px 1px 1px;}
.clips ul.topic li a:hover,
.clips ul.topic li:hover a
{background:white;border-width:1px 1px 0 1px;}
.clips ul.topic li.active ul
{display:block; position:absolute; left:0; top:32px; list-style:none; margin:0; height:194px; background:white; width:583px; padding:20px 49px 20px 49px; border:1px solid #71bc10; border-width:0 1px 1px 1px; z-index:1;}
.clips ul.topic li a:hover ul,
.clips ul.topic li:hover ul
{display:block; position:absolute; left:0; top:32px; list-style:none; margin:0; height:194px; background:white; width:583px; padding:20px 49px 20px 49px; border:1px solid #71bc10; border-width:0 1px 1px 1px; z-index:100;}
.clips ul.topic li a:hover table {width:111px;border-top:none}
.clips ul.topic li a table {width:111px;border-top:solid 1px #71bc10}
</style>
效果图：
只要点击任意一项，就可以显示不同内容【】演示页面：http://www.mangbar.com