用javascript制作导航条的三级下拉菜单
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery三级菜单</title>
<!-- 标题左logo -->
<link rel="icon" type="image/x-icon" href="">
<link rel="stylesheet" href=""> <!-- 外部css -->
<!-- 引入jquery -->
<script src="jquery/jquery-3.3.1.min.js"></script>
<style>
*{margin: 0px;padding: 0px;}
.menu{width: 1300px;height: 40px;background:#ccc;margin: 0px auto;text-align: center;border-radius: 6px;}
a{display: line-block; text-decoration: none; color: black;padding: 20px;text-align: center;line-height: 40px;position: relative;}
a:hover{background: #fff;}
ul{list-style: none;position: absolute; left: 0px;bottom: -1; width: 115px;}
.one:hover ul{background: #ccc;}
.have-three{position: relative;}
.three{position: absolute;}
</style>
<script>
$(document).ready(function(){
//隐藏二级和三级菜单
$(".two").hide();
$(".three").hide();
//当鼠标指向有二级菜单的一级菜单时，显示二级菜单
$(".one").mouseover(function(){
$(this).find(".two").slideDown(200);
})
//当鼠标离开具有二级菜单的一级菜单时，不显示二级菜单
$(".one").mouseleave(function(){
$(this).find(".two").slideUp(200);
})
//当鼠标指向有三级菜单的二级菜单时，显示三级菜单
$(".have-three").mouseover(function(){
$(this).find(".three").slideDown(200);
$(this).find(".three").css({"left":"120px","top":"00px"});
})
//当鼠标离开有三级菜单的二级菜单时，不显示三级菜单
$(".have-three").mouseleave(function(){
$(this).find(".three").slideUp(200);
})
})
</script>
</head>
<body>
<div>
<a href="">网站首页</a>
<a href="">新 闻
<ul>
<li>图片新闻</li>
<li>视频新闻</li>
<li>文字新闻</li>
</ul>
</a>
<a href="">通 知</a>
<a href="">资源下载
<ul>
<li>程序源码</li>
<li>技术文章</li>
<li>软件工具
<ul>
<li>javascript</li>
<li>sublime</li>
<li>html语言</li>
</ul>
</li>
</ul>
</a>
<a href="">在线学习
<ul>
<li>C++语言</li>
<li>PHP脚本语言</li>
<li>面向对象
<ul>
<li>语言AA</li>
<li>语言BB</li>
<li>语言CC</li>
</ul>
</li>
</ul>
</a>
<a href="">联系我们</a>
</div>
</body>
</html>