完整代码：
<!doctype html>
<html>
<head>
<style>
*{padding:0; margin:0;border:0}
li{list-style:none}
.Classify{width:1200px;margin:0 auto}
.ClassifyH{width:100%;height:50px;position:relative;font:24px/50px 'microsoft yahei';border-bottom:2px solid #eee}
.ClassifyNav{position:absolute;bottom:0;right:0;height:40px;font:16px/40px 'microsoft yahei'}
.ClassifyNav>li{float:left;margin-left:10px;cursor:pointer}
.ClassifyNav>.active:after{content:"";display:block;width:100%;height:2px;background:#f3006d}
.ClassifyMain{width:100%;overflow:hidden;margin-top:20px}
.ClassifyBox{width:100%;overflow:hidden;display:none}
.ClassifyMain .show{display:block}
.ClassifyContent{width:300px;height:400px;float:left;background:#f8f8f8}
.ClassifyContentH{width:100%;height:30px;font:24px/30px 'microsoft yahei';text-align:center;padding-top:50px}
.ClassifyContentInfo{padding:20px;height:280px;font:16px/30px arial,'microsoft yahei';text-align:justify}
.ClassifyImages{width:890px;height:400px;float:right;justify-content:space-between;display:flex;flex-flow:row wrap}
.ClassifyImages li{width:32.5%}
.ClassifyImages li:nth-child(4),.ClassifyImages li:nth-child(5),.ClassifyImages li:nth-child(6){margin-top:10px}
.ClassifyImages li img{width:100%;display:block}
</style>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div class="Classify">
<div class="ClassifyH">主题展会
<ul class="ClassifyNav">
<li class="active">健康与美容</li>
<li>女性时尚</li>
<li>母婴用品</li>
<li>家庭与厨房</li>
<li>新娘礼服与婚纱</li>
<li>职业与教育</li>
<li>银行与金融</li>
<li>相关产品</li>
</ul>
</div>
<div class="ClassifyMain">
<div class="ClassifyBox show">
<div class="ClassifyContent">
<div class="ClassifyContentH">健康与美容</div>
<div class="ClassifyContentInfo">健康的标准、影响健康的因素；亚健康的基本概念、主要表现、出现亚健康的原因、从健康到亚健康再到疾病的发展过程以及自我检测的方法、维护健康的基本原则和措施；介绍了人的一生各个时期的生理特点、心理特点及其注意事项、优生优育，预防先天性畸形的基本常识</div>
</div>
<ul class="ClassifyImages">
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
</ul>
</div>
<div class="ClassifyBox">
<div class="ClassifyContent">
<div class="ClassifyContentH">女性时尚</div>
<div class="ClassifyContentInfo">女性时尚(Women's fashion) ，简单地说，顾名思义，女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上，也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面，如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>
</div>
<ul class="ClassifyImages">
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
</ul>
</div>
<div class="ClassifyBox">
<div class="ClassifyContent">
<div class="ClassifyContentH">母婴用品</div>
<div class="ClassifyContentInfo">女性时尚(Women's fashion) ，简单地说，顾名思义，女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上，也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面，如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>
</div>
<ul class="ClassifyImages">
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
</ul>
</div>
<div class="ClassifyBox">
<div class="ClassifyContent">
<div class="ClassifyContentH">家庭与厨房</div>
<div class="ClassifyContentInfo">女性时尚(Women's fashion) ，简单地说，顾名思义，女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上，也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面，如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>
</div>
<ul class="ClassifyImages">
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
</ul>
</div>
<div class="ClassifyBox">
<div class="ClassifyContent">
<div class="ClassifyContentH">新娘礼服与婚纱</div>
<div class="ClassifyContentInfo">女性时尚(Women's fashion) ，简单地说，顾名思义，女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上，也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面，如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>
</div>
<ul class="ClassifyImages">
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
</ul>
</div>
<div class="ClassifyBox">
<div class="ClassifyContent">
<div class="ClassifyContentH">职业与教育</div>
<div class="ClassifyContentInfo">女性时尚(Women's fashion) ，简单地说，顾名思义，女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上，也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面，如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>
</div>
<ul class="ClassifyImages">
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
</ul>
</div>
<div class="ClassifyBox">
<div class="ClassifyContent">
<div class="ClassifyContentH">银行与金融</div>
<div class="ClassifyContentInfo">女性时尚(Women's fashion) ，简单地说，顾名思义，女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上，也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面，如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>
</div>
<ul class="ClassifyImages">
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
</ul>
</div>
<div class="ClassifyBox">
<div class="ClassifyContent">
<div class="ClassifyContentH">相关产品</div>
<div class="ClassifyContentInfo">女性时尚(Women's fashion) ，简单地说，顾名思义，女性时尚就是“女性”与“时尚”的相加。在这个极简化的意义上，也就是短时间内为女性所崇尚的生活方式。 女性时尚涉及女性生活的各个方面，如衣着打扮、饮食、行为、居住、消费、甚至情感表达与思考方式等。</div>
</div>
<ul class="ClassifyImages">
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
<li><img src="pic/classify.jpg"/></li>
</ul>
</div>
</div>
</div>
<script>
//展会分类切换
$(function(){
$('.ClassifyNav li').mouseover(function(){
var liindex = $('.ClassifyNav li').index(this);
$(this).addClass('active').siblings().removeClass('active');
$('.ClassifyBox').eq(liindex).fadeIn(150).siblings('.ClassifyBox').hide();
var liWidth = $('.ClassifyNav li').width();
$('.ClassifyNav p').stop(false,true).animate({'left' : liindex * liWidth + 'px'},300);
});
});
</script>
</body>
</html>
效果预览：
