直接使用代码
图片素材
点击下载本素材所包含的图片，js文件
css代码
<style>
#top{height:75px}
#top .daohang ul>li{display:inline-block;width:143px;height:75px;line-height:75px;position:relative;margin-left:25px}
#top .daohang ul li>a{font-size:20px;display:block;text-align:center;width:100%;font-family:Helvetica Neue,Helvetica,sans-serif;font-weight:500}
#top .daohang ul li .xiala{width:1140px;position:absolute;top:75px;display:none;height:auto;z-index:9999;overflow:visible}
#top .daohang ul li .xiala-1{left:-358px}
#top .daohang ul li .xiala-2{left:-533px}
#top .daohang ul li>a.current{color:#096;cursor:pointer}
.children-box{background-color:#f5f5f5;}
.c-top-img-box{height:27px;margin:0;line-height: 33px;}
.children-box .c-top-img{width:30px;}
.children-box .c-bg{padding-top:30px;background:url(http://www.bootfastui.cn/img/2021/0307/top_bg.png) no-repeat top left}
.children-box .c-left{width:200px;float:left;margin-left:30px}
.children-box .c-left .left-item{line-height:55px;padding-left:20px;font-size:20px;border-radius:6px;margin-bottom:15px}
.children-box .c-left .left-item:hover,.children-box .c-left .left-item_current{background:#096;color:#fff}
.children-box .c-left .left-item .f-right{display:inline-block;float:right;font-size:20px;margin-right:10px;margin-top:13px}
.children-box .c-right{width:880px;float:left;margin-left:30px;background:rgba(255,255,255,.4);border:1px solid #ccc;border-radius:4px;box-shadow:0 0 5px #ccc;padding-bottom:30px;padding-top:5px}
.children-box .c-right .tab-content{display:none;}
.children-box .c-right a.r-item{display:block;width:29%;padding-left:4%;float:left;line-height:50px;color:#333;font-size:16px}
.children-box .c-right a.r-item2{width:90%;padding-left:4%;float:left}
.children-box .c-right a.r-item:hover{color:#096}
.c-footer{border-top:1px solid #ccc;line-height:80px;text-align:center;font-size:18px;background:url(http://www.bootfastui.cn/img/2021/0307/top_bg2.png) no-repeat top left;}
</style>
HTML+JS代码
<div class="container">
<div style="line-height:50px; color:#666; border-bottom:1px solid #efefef">优控智能技术有限公司：以客户的赞誉来赢得市场！ <p
style="display:inline-block; float:right">
<a href="/">中文</a> | <a href="/index.php/En">En</a>
<b style="margin-left:30px;font-size:22px;color:#000"><img src="http://www.bootfastui.cn/img/2021/0307/ico_tel.png" alt="63328009"
width="30" /> 0571 -
63328009</b>
</p>
</div>
</div>
<!--头部导航 -->
<div id="top" class="bk-bottom visible-lg visible-md visible-sm">
<div class="container">
<div class="row">
<div class="col-md-3 margin-top5">
<a href="#"><img src="http://www.bootfastui.cn/img/2021/0307/logo3.png" alt="优控智能技术有限公司" width="250" /></a>
</div>
<div class="col-md-9 daohang">
<ul style="margin:0">
<li>
<a href="#">产品中心</a>
<div class="xiala xiala-1" >
<div class="c-top-img-box"> <img src="http://www.bootfastui.cn/img/2021/0307/ico_top.png" alt="" width="45"
class="c-top-img"
style="margin-left:390px;"></div>
<div class="children-box">
<div class="c-bg">
<div class="c-left">
<div class="left-item left-item_current">产品 <img
src="http://www.bootfastui.cn/img/2021/0307/ico_right.png" width="30"
class="f-right" /></div>
</div>
<div class="c-right">
<div class="tab-content" style="display: block;">
<a href="#"
class="r-item">智慧药房/自动发药机</a><a href="#"
class="r-item">24小时无人药房/自助取药机</a><a href="#"
class="r-item">多用途智能存取柜/IDC6064</a>
</div>
</div>
<div class="clear"></div>
<div class="clear margin-top30"></div>
</div>
</div>
<div class="c-footer">
<a href="#" class="f-item"><span
class="glyphicon glyphicon-th"></span> 全部</a>
</div>
</div>
</li>
<li>
<a href="#">经典案例</a>
<div class="xiala xiala-2">
<div class="c-top-img-box"> <img src="http://www.bootfastui.cn/img/2021/0307/ico_top.png" alt="" width="45"
class="c-top-img"
style="margin-left:610px;"></div>
<div class="children-box">
<div class="c-bg">
<div class="c-left">
<div class="left-item left-item_current">经典案例 <img
src="http://www.bootfastui.cn/img/2021/0307/ico_right.png" width="30"
class="f-right" /></div>
<div class="left-item">支持 <img src="http://www.bootfastui.cn/img/2021/0307/ico_right.png" width="30"
class="f-right" />
</div>
</div>
<div class="c-right">
<div class="tab-content" style="display: block;">
<a href="#" class="r-item r-item2">潍坊眼科医院门诊大厅24小时无人自助取药</a><a href="#"
class="r-item r-item2">汉中市人民医院妇儿专科楼门诊大厅自助取药</a><a href="#"
class="r-item r-item2">阜阳市第五人民医院发热门诊无接触自助取药柜</a><a href="#"
class="r-item r-item2">怀化市辰溪县人民医院发热门诊24小时无人药房</a><a href="#"
class="r-item r-item2">北京市东城区妇幼保健医院24小时无人药房</a><a href="#"
class="r-item r-item2">西北大学附属医院西安市第三医院发热门诊24小时无人药房</a><a href="#"
class="r-item r-item2">中山市火炬开发区医院发热门诊24小时无人药房</a><a href="#"
class="r-item r-item2">南方医科大学附属中山市小榄人民医院发热门诊24小时无人药房</a><a href="#"
class="r-item r-item2">汉中市人民医院妇儿专科楼门诊智慧药房系统</a><a href="#"
class="r-item r-item2">山东药品食品职业学校药学部智慧药房系统</a><a href="#"
class="r-item r-item2">安康市旬阳县人民医院智慧药房发药系统</a><a href="#"
class="r-item r-item2">安康市中医医院智慧药房</a><a href="#"
class="r-item r-item2">宝鸡市人民医院发热门诊自助药房</a>
</div>
<div class="tab-content">
<a href="#" class="r-item r-item2">常见问题</a><a href="#"
class="r-item r-item2">产品对比</a><a href="#"
class="r-item r-item2">资料下载</a>
</div>
</div>
<div class="clear h20"></div>
</div>
</div>
<div class="c-footer">
<a href="#" class="f-item"><span
class="glyphicon glyphicon-th"></span> 全部</a>
</div>
</div>
</li>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">企业视频</a>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
<!--col-10 end -->
</div>
</div>
<img src="http://bootfastui.cn/Public/images/banner1.jpg" alt="" width="100%">
<script type="text/javascript">
$(function () {
$('.daohang li a').hover(function () {
$(this).next('.xiala').slideDown()
$(this).addClass('current')
}, function () {
$(this).next('.xiala').slideUp()
$(this).removeClass('current')
})
$('.xiala').hover(function () {
$(this).stop().show()
$(this).prev().addClass('current')
}, function () {
$(this).slideUp()
$(this).prev().removeClass('current')
})
$('.left-item').hover(function () {
$index = $(this).index()
$(this).siblings().removeClass('left-item_current')
$(this).addClass('left-item_current')
$(this).parent('.c-left').next().find('.tab-content').hide().eq($index).show()
}, function () {
})
})
</script>
0571 -
63328009
