Ⅰ、问题描述：
1、用 jQuery + css 实现，鼠标放在一级菜单上会将二级菜单弹出来的效果；
2、分析：
A、用 html 实现菜单及子元素的排版；
B、用 css 实现页面的显示效果；
C、用 jQuery 实现元素的获取及事件的操作；
D、如果没有 jquery.min.js 文件的，可以在网上找找，或者私信我也可以；
Ⅱ、实现过程如下：
1、运行软件VScode，亲测可实现；
2、运行代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
margin: 100px;
}
ul {
list-style: none;
}
.nav > li {
float: left;
width: 120px;
text-align: center;
}
.nav ul {
display: none;
}
</style>
</head>
<body>
<div class="container">
<ul class="nav">
<li>新闻
<ul>
<li>热点新闻</li>
<li>媒体报道</li>
<li>经济之声</li>
</ul>
</li>
<li>产品
<ul>
<li>产品A</li>
<li>产品B</li>
<li>产品C</li>
</ul>
</li>
</ul>
</div>
<script src="./jquery.min.js"></script>
<script>
$(function() {
$('.nav').children('li').hover(function() {
$(this).children('ul').stop().slideDown(500);
},function() {
$(this).children('ul').stop().slideUp(500);
});
/*
hover 中的两个函数：第一个函数代表着鼠标放上去所触发的动作，第二个函数代表着鼠标离开所触发的动作；
*/
});
</script>
</body>
</html>
3、结果展示：
A、刚打开的页面效果；
B、当鼠标放在一级标题后的显示效果；
C、当鼠标离开一级标题后的显示效果 (其是处于一个消失到不见的过程) ；
Ⅲ、小结：
哪里有不对或不合适的地方，还请大佬们多多指点和交流！