<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="ejs.js"></script>
<style>
.clearfix:before,
.clearfix:after {
content: ' ';
display: table;
}
.clearfix:after {
clear: both;
}
body {
margin: 0;
padding: 0;
background-color: #fff;
box-sizing: border-box;
-moz-box-sizing: border-box;
/* Firefox */
-webkit-box-sizing: border-box;
/* Safari */
}
body,
button,
input,
select,
textarea {
font: 14px/1.5 'Microsoft YaHei', tahoma, arial, \5b8b\4f53;
color: #333;
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.nav-wrap .link {
display: inline-block;
padding: 0 17px;
height: 75px;
line-height: 102px;
color: #2c3746;
text-decoration: none;
font-size: 14px;
position: relative;
}
.nav-wrap .cont {
position: absolute;
color: #fff;
background: #f8b102;
top: 74px;
left: 0px;
width: 100%;
z-index: 100;
display: none;
transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
/* Firefox 4 */
-webkit-transition: all 0.6s ease;
/* Safari 和 Chrome */
-o-transition: all 0.6s ease;
/* Opera ease*/
}
.nav-wrap .cont .linka {
display: block;
height: 36px;
line-height: 36px;
text-align: center;
color: #2c3746;
}
.nav-wrap .cont .linka:hover {
background: #FFCC4E;
}
.nav-wrap .on {
background: #f8b102;
}
</style>
<script>
$(document).ready(function () {
$('.nav-wrap .link').hover(function(){
$(this).addClass('on')
$(this).find('.cont').css({"display":"block"})
},function(){
$(this).removeClass('on')
$(this).find('.cont').css({"display":"none"})
})
});
</script>
</head>
<body>
<div class="nav-wrap">
<a href="####" class="link">供应链+
<div class="cont">
<span class="linka">仓配服务</span>
<span class="linka">TC转运</span>
<span class="linka">跨境物流</span>
</div>
</a>
<a href="####" class="link">苏宁快递
<div class="cont">
<span class="linka">如约送</span>
<span class="linka">送装一体</span>
<span class="linka">基础服务</span>
</div>
</a>
<a href="####" class="link">同城服务
<div class="cont">
<span class="linka">同城配送</span>
<span class="linka">社区服务</span>
<span class="linka">自提服务</span>
</div>
</a>
<a href="####" class="link">农村物流</a>
<a href="####" class="link">物流金融
<div class="cont">
<span class="linka">企业融资</span>
<span class="linka">企业支付</span>
<span class="linka">企业保险</span>
</div>
</a>
<a href="####" class="link">物流大市场</a>
<a href="####" class="link">物流云</a>
</div>
</body>
</html>