宋柏霖的第十四个作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉导航</title>
<script type="text/javascript" src="jquery-3.4.0.js"></script>
<style type="text/css">
*{margin: 0px;padding: 0px;}
.dh{
width: 1200px;height: 35px;margin: 80px auto;background: #839dff;border: 1px solid #ccc;border-radius: 5px;}
ul{list-style: none;}
ul li{width: 120px;height: 35px;line-height: 35px;text-align: center;float:left;border-right:1px solid #0000FF;cursor: pointer;
color:#ffffff;}
.twobox li {width: 120px;height: 30px;line-height: 30px; background: #5957ff; color:#ffffff; font-size: 14px;position: relative; border:0px;}
.three {position: absolute; top: 0px;left: 100px;}
.three li {width: 99px;height: 30px;line-height: 30px;border: 0;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.twobox').hide()
$('.three').hide()
$('.one>li').mouseover(function(){
$(this).find('.twobox').slideDown(500)
})
$('.one>li').mouseleave(function(){
$(this).find('.twobox').slideUp(500)
})
$('.twobox').mouseover(function(){
$(this).find('.three').slideDown(500)
})
$('.twobox').mouseleave(function(){
$(this).find('.three').slideUp(500)
})
})
</script>
</head>
<body>
<div class="dh">
<ul class="one">
<li>网站首页</li>
<li>关于我们
<ul class="twobox">
<li>集团介绍</li>
<li>企业形象</li>
<li>企业文化</li>
<li>服务项目</li>
<li>行业前景</li>
<li>高薪诚聘</li>
</ul>
</li>
<li>新闻资讯
<ul class="twobox">
<li>公司新闻</li>
<li>通知公告</li>
</li>
</ul>
<li>产品中心
<ul class="twobox">
<li>最新产品</li>
</ul>
</li>
<li>会员中心
<ul class="twobox">
<li>查询通道
<ul class="three">
<li>卡密查询</li>
<li>身份证号查询</li>
</ul>
</li>
<li>会员须知</li>
</ul>
<li>合作招商
<ul class="twobox">
<li>合作招商</li>
<li>代理商登陆</li>
</ul>
</li>
<li>道路救援
<ul class="twobox">
<li>道路救援网络</li>
<li>道路救援服务项目</li>
</ul>
</li>
<li>医疗救援
<ul class="twobox">
<li>医疗救援网络</li>
<li>医疗救援服务项目</li>
</ul>
</li>
<li>资料下载
<ul class="twobox">
<li>资料下载</li>
</ul>
</li>
</ul>
</div>
</body>
</html>