完整代碼：
<!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>
效果預覽：
