银联海购官网请点击 http://haigou.unionpay.com/
1.实现效果预览展示如下：
2.源码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>银联海购</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="nav-bar">
<div class="nav-content">
<div class="all-product-kinds">
<p>全部商品分类</p>
<ul class="silder-kinds" id="nav-tab" style="display: none;">
<li class="clearfix active">
<dl class="main">
<dt><a href="#none">母婴用品</a></dt>
<dd><a href="#none">奶粉</a></dd>
<dd><a href="#none">米粉</a></dd>
<dd><a href="#none">玩具</a></dd>
<dd><a href="#none">润肤用品</a></dd>
<dd><a href="#none">婴儿车</a></dd>
</dl>
<div class="silder-kinds-detail" style="display: block;">
<dl>
<dt><a href="#none">奶粉辅食</a></dt>
<dd><a href="#none">营养剂</a></dd>
<dd><a href="#none">奶粉</a></dd>
<dd><a href="#none">米粉</a></dd>
</dl>
<dl>
<dt><a href="#none">洗护/喂哺</a></dt>
<dd><a href="#none">保健/安全</a></dd>
<dd><a href="#none">哺乳用品</a></dd>
<dd><a href="#none">沐浴，润肤用品</a></dd>
<dd><a href="#none">止尿裤</a></dd>
</dl>
<dl>
<dt><a href="#none">孕妇产品</a></dt>
<dd><a href="#none">孕妇营养用品</a></dd>
<dd><a href="#none">妊娠纹护理</a></dd>
</dl>
<dl>
<dt><a href="#none">童装</a></dt>
<dd><a href="#none">童鞋</a></dd>
<dd><a href="#none">套装</a></dd>
<dd><a href="#none">裤子</a></dd>
<dd><a href="#none">T恤</a></dd>
<dd><a href="#none">裙子</a></dd>
<dd><a href="#none">普通外套</a></dd>
</dl>
<dl>
<dt><a href="#none">玩具</a></dt>
<dd><a href="#none">婴幼玩具</a></dd>
<dd><a href="#none">模型玩具</a></dd>
<dd><a href="#none">玩偶/手办</a></dd>
<dd><a href="#none">益智玩具</a></dd>
</dl>
<dl>
<dt><a href="#none">婴儿车/车垫</a></dt>
<dd><a href="#none">婴儿车/车垫</a></dd>
</dl>
</div>
</li>
<li class="clearfix">
<dl class="main">
<dt><a href="#none">美容护肤</a></dt>
<dd><a href="#none">唇膏</a></dd>
<dd><a href="#none">粉饼</a></dd>
<dd><a href="#none">香水</a></dd>
<dd><a href="#none">美容工具</a></dd>
<dd><a href="#none">身体护肤</a></dd>
<dd><a href="#none">洁面乳</a></dd>
</dl>
<div class="silder-kinds-detail" style="display: none;">
<dl>
<dt><a href="#none">美容护肤</a></dt>
<dd><a href="#none">养颜</a></dd>
<dd><a href="#none">BB霜</a></dd>
</dl>
<dl>
<dt><a href="#none">护肤品</a></dt>
<dd><a href="#none">乳液/面霜</a></dd>
<dd><a href="#none">面膜</a></dd>
<dd><a href="#none">化妆水</a></dd>
<dd><a href="#none">套装</a></dd>
<dd><a href="#none">卸妆</a></dd>
<dd><a href="#none">精华素</a></dd>
<dd><a href="#none">男士护肤</a></dd>
<dd><a href="#none">防晒霜</a></dd>
<dd><a href="#none">眼霜</a></dd>
<dd><a href="#none">洁面乳</a></dd>
</dl>
<dl>
<dt><a href="#none">香水/身体护理</a></dt>
<dd><a href="#none">香水</a></dd>
<dd><a href="#none">身体护理</a></dd>
</dl>
<dl>
<dt><a href="#none">美容工具/美发护发</a></dt>
<dd><a href="#none">美容工具</a></dd>
<dd><a href="#none">美发护发</a></dd>
</dl>
</div>
</li>
<li class="clearfix">
<dl class="main">
<dt><a href="#none">服装箱包</a></dt>
<dd><a href="#none">女鞋</a></dd>
<dd><a href="#none">短裙</a></dd>
<dd><a href="#none">西服</a></dd>
<dd><a href="#none">T恤衬衫</a></dd>
<dd><a href="#none">男运动鞋</a></dd>
<dd><a href="#none">腕表珠宝</a></dd>
</dl>
<div class="silder-kinds-detail" style="display: none;">
<dl>
<dt><a href="#none">服装箱包</a></dt>
<dd><a href="#none">唇膏</a></dd>
<dd><a href="#none">BB霜</a></dd>
<dd><a href="#none">粉饼</a></dd>
<dd><a href="#none">粉底/隔离</a></dd>
<dd><a href="#none">眼部</a></dd>
<dd><a href="#none">腮红</a></dd>
</dl>
<dl>
<dt><a href="#none">护肤品</a></dt>
<dd><a href="#none">乳液/面霜</a></dd>
<dd><a href="#none">面膜</a></dd>
<dd><a href="#none">化妆水</a></dd>
<dd><a href="#none">套装</a></dd>
<dd><a href="#none">卸妆</a></dd>
<dd><a href="#none">精华素</a></dd>
<dd><a href="#none">男士护肤</a></dd>
<dd><a href="#none">防晒霜</a></dd>
<dd><a href="#none">眼霜</a></dd>
<dd><a href="#none">洁面乳</a></dd>
</dl>
<dl>
<dt><a href="#none">香水/身体护理</a></dt>
<dd><a href="#none">香水</a></dd>
<dd><a href="#none">身体护理</a></dd>
</dl>
<dl>
<dt><a href="#none">美容工具/美发护发</a></dt>
<dd><a href="#none">美容工具</a></dd>
<dd><a href="#none">美发护发</a></dd>
</dl>
</div>
</li>
<li class="clearfix">
<dl class="main">
<dt><a href="#none">食品保健</a></dt>
<dd><a href="#none">咖啡</a></dd>
<dd><a href="#none">巧克力</a></dd>
<dd><a href="#none">放便面</a></dd>
<dd><a href="#none">零食特产</a></dd>
<dd><a href="#none">美容养颜</a></dd>
<dd><a href="#none">营养保健</a></dd>
</dl>
<div class="silder-kinds-detail" style="display: none;">
<dl>
<dt><a href="#none">食品保健</a></dt>
<dd><a href="#none">唇膏</a></dd>
<dd><a href="#none">BB霜</a></dd>
</dl>
<dl>
<dt><a href="#none">护肤品</a></dt>
<dd><a href="#none">乳液/面霜</a></dd>
<dd><a href="#none">面膜</a></dd>
<dd><a href="#none">化妆水</a></dd>
<dd><a href="#none">套装</a></dd>
</dl>
<dl>
<dt><a href="#none">香水/身体护理</a></dt>
<dd><a href="#none">香水</a></dd>
<dd><a href="#none">身体护理</a></dd>
</dl>
<dl>
<dt><a href="#none">美容工具/美发护发</a></dt>
<dd><a href="#none">美容工具</a></dd>
<dd><a href="#none">美发护发</a></dd>
</dl>
</div>
</li>
<li class="clearfix">
<dl class="main">
<dt><a href="#none">家具数码</a></dt>
<dd><a href="#none">日用</a></dd>
<dd><a href="#none">厨具</a></dd>
<dd><a href="#none">个护</a></dd>
<dd><a href="#none">生活家电</a></dd>
<dd><a href="#none">数码影音</a></dd>
<dd><a href="#none">厨房电器</a></dd>
</dl>
<div class="silder-kinds-detail" style="display: none;">
<dl>
<dt><a href="#none">家具数码</a></dt>
<dd><a href="#none">唇膏</a></dd>
<dd><a href="#none">BB霜</a></dd>
<dd><a href="#none">粉饼</a></dd>
<dd><a href="#none">粉底/隔离</a></dd>
<dd><a href="#none">眼部</a></dd>
<dd><a href="#none">腮红</a></dd>
</dl>
<dl>
<dt><a href="#none">护肤品</a></dt>
<dd><a href="#none">乳液/面霜</a></dd>
<dd><a href="#none">面膜</a></dd>
<dd><a href="#none">化妆水</a></dd>
<dd><a href="#none">套装</a></dd>
<dd><a href="#none">卸妆</a></dd>
<dd><a href="#none">精华素</a></dd>
<dd><a href="#none">男士护肤</a></dd>
<dd><a href="#none">防晒霜</a></dd>
<dd><a href="#none">眼霜</a></dd>
<dd><a href="#none">洁面乳</a></dd>
</dl>
<dl>
<dt><a href="#none">香水/身体护理</a></dt>
<dd><a href="#none">香水</a></dd>
<dd><a href="#none">身体护理</a></dd>
</dl>
<dl>
<dt><a href="#none">美容工具/美发护发</a></dt>
<dd><a href="#none">美容工具</a></dd>
<dd><a href="#none">美发护发</a></dd>
</dl>
</div>
</li>
</ul>
</div>
<ul class="main-nav" >
<li><a href="#none">首页</a></li>
<li><a href="#none">海外直邮</a></li>
<li class="parent global-btn">
<a href="#none">全球馆</a>
<ul class="level-2">
<li><a href="#none">美国馆</a></li>
<li><a href="#none">欧洲馆</a></li>
<li><a href="#none">日本馆</a></li>
<li><a href="#none">韩国馆</a></li>
<li><a href="#none">大洋馆</a></li>
</ul>
</li>
<li><a href="#none">折扣专区</a></li>
<li><a href="#none">出境优惠</a></li>
<li><a href="#none">教育缴费</a></li>
<li><a href="#none">全球商户</a></li>
</ul>
</div>
</div>
<!--引入jQuery库-->
<script type="text/javascript" src="js/lib/jquery-3.1.1.min.js" ></script>
<!--作者：zhangjiangfeng 时间：2016-11-10 描述：选项卡内容切换-->
<script type="text/javascript" src="js/unionpay.js"></script>
</body>
</html>
@charset "utf-8";
/* CSS Document */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font: inherit;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
width: 100%;
height:100%;
font-size: 16px;
color:#333;
font-family: "Microsoft YaHei";
-webkit-font-smoothing: antialiased;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
input, textarea {
border: 0;
}
/*去除a标签的虚线框*/
a {
blr:expression(this.onFocus=this.blur());
outline: none;
text-decoration:none;
}
.fr {
float: right;
}
.fl {
float: left;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: ".";
clear: both;
height: 0;
}
* html .clearfix {
zoom: 1;
}
*:first-child + html .clearfix {
zoom: 1;
} ::-webkit-input-placeholder {
color: #999;
}
:-moz-placeholder {/* Firefox 18- */
color: #999;
}
::-moz-placeholder{/* Firefox 19+ */
color: #999;
}
:-ms-input-placeholder {
color: #999;
} html {
width: 100%;
height:100%;
font-size: 16px;
} .nav-bar {
height: 40px;
min-width: 1190px;
width: 100%;
background-color: #3A3A3A;
color: #fff;
}
/*-----导航内容居中实现样式------*/
.nav-content {
width: 1190px;
height: 40px;
margin: 0 auto;
}
/*--------全部商品分类样式-------*/
.all-product-kinds {
width: 220px;
height: 100%;
background-color: #19A6A6;
position: relative;
float: left;
}
ul.silder-kinds {
border-right: solid 1px #19A6A6;
}
.all-product-kinds .silder-kinds li:hover {
background-color: #19A6A6;
}
.all-product-kinds .silder-kinds li:hover dl.main a {
color: #FFFFFF;
}
.all-product-kinds .silder-kinds dl.main a:hover {
text-decoration: underline;
} /*添加选中样式*/
.all-product-kinds .silder-kinds li.active {
background-color: #19A6A6;
}
.all-product-kinds .silder-kinds li.active dl.main a {
color: #FFFFFF;
} .all-product-kinds p {
padding-left: 20px;
line-height: 40px;
cursor: pointer;
}
.all-product-kinds ul {
list-style: none;
position: absolute;
left: 0;
top: 40px;
padding-top: 20px;
width: 220px;
min-height: 417px;
font-size: 12px;
background-color:#FFFFFF;
}
ul.silder-kinds dl.main dd {
float: left;
width: 65px;
margin-top: 6px;
}
ul.silder-kinds dl.main dt a {
color: #333;
font-weight: 700;
}
ul.silder-kinds dl.main dd a {
color: #666666;
}
ul.silder-kinds li {
padding-left: 20px;
padding-bottom: 10px;
} .silder-kinds-detail {
width: 780px;
height: 417px;
position: absolute;
left:220px;
top: 0;
padding-top: 20px;
background-color: #FFFFFF;
border-color: #19A6A6;
border-style: solid;
border-width: 0 1px 1px;
}
.silder-kinds-detail dl {
width: 335px;
margin: 28px 0 0 39px;
float: left;
}
.silder-kinds-detail dt {
padding-bottom: 10px;
border-bottom: 1px solid #D4D4D4;
}
.silder-kinds-detail dl dt a {
font-weight: bolder;
color: #333;
font-size: 14px;
}
.silder-kinds-detail dl dd a {
color: #666;
} .silder-kinds-detail dl dd a:hover {
color: #19A6A6;
text-decoration: underline;
}
.silder-kinds-detail dl dd {
float: left;
margin: 10px 22px 0 0;
} .nav-bar ul.main-nav {
list-style: none;
outline: 0;
float: left;
}
.nav-bar ul.main-nav li {
display: inline-block;
line-height: 40px;
}
.nav-bar ul.main-nav li.parent {
position:relative;
}
.nav-bar ul.main-nav li a {
text-decoration: none;
color: #FFFFFF;
display: block;
padding: 0 20px;
}
.nav-bar ul.main-nav li a:hover {
background-color: rgba(255,255,255,.2);
} /*下拉菜单*/
.level-2 {
position: absolute;
left: 0;
top: 40px;
background-color: #3a3a3a;
}
.level-2>li>a {
display: block;
padding: 0 20px;
text-decoration: none;
color: #fff;
}
.level-2>li>a {
color: #19A6A6;
}
.level-2 {
display: none;
}
ul.main-nav>li.global-btn:hover .level-2 {
display: block;
}
.nav-bar ul.main-nav li>ul.level-2>li>a:hover {
background-color: #19a6a6;
color: #FFFFFF;
}
/**
* 商品分类列表展示
* Author zhangjiangfeng
* Date 2016/11/12
*/
$(function(){
var $navTab = $("#nav-tab"); //选项卡
var $navTabDetail = $navTab.find(".silder-kinds-detail");
var $leftNavTab = $(".all-product-kinds p");
var time = null;
//选项卡内容之间切换
/*$navTab.on("click","li", function(){
var $that = $(this);
$that.addClass("active").siblings().removeClass("active");
$navTabDetail.each(function(i){
var $_that = $(this);
$_that.hide();
});
$that.find(".silder-kinds-detail").show();
})*/ $navTab.children("li").hover(function(){
//清除定时器
clearInterval(time);
var $that = $(this);
$that.addClass("active").siblings().removeClass("active");
$navTabDetail.each(function(i){
var $_that = $(this);
$_that.hide();
});
//商品分类详情
$that.find(".silder-kinds-detail").show();
},function(){
//商品分类详情
time = setInterval(function(){
$navTab.hide();
},3000);
}) $leftNavTab.hover(function(){
$navTab.show();
});
})