在这里介绍鼠标悬停导航栏显示下拉菜单得两种方法，html和css样式就不贴代码了。
1、原生js
<script>// window.onload = function(){// 获取需要悬浮的对象let show = document.getElementById("businessarea");// 获取被隐藏的菜单let menu = document.getElementById("businessarea-menu");// 给show添加鼠标悬停事件show.onmouseover = function(){menu.style.display = "block";}show.onmouseout = function(){// 获取菜单栏的坐标值let menux = menu.offsetLeft;let menuy = menu.offsetTop;let menuX = menu.offsetLeft + menu.offsetWidth;let menuY = menu.offsetTop + menu.offsetHeight;// 获取鼠标的坐标值let event = window.event;let mouseX = event.clientX;let mouseY = event.clientY;if(mouseX<menux || mouseX>menuX || mouseY<menuY || mouseY>menuY){menu.style.display = "none";}}menu.onmouseover = function(){menu.style.display = "block";}menu.onmouseleave = function(){menu.style.display = "none";}// }</script>
2、Jquery
注意，要先引入jquery.js文件
<script>$(document).ready(function (){$('#newsarea-menu').hide(); //打开页面隐藏下拉列表$('#newsarea').hover( //鼠标划过导航栏目时function(){$('#newsarea-menu').show(); //下拉列表显示},function(){$('#newsarea-menu').hide(); //鼠标移开后下拉列表隐藏});$('#newsarea-menu').hover( //鼠标滑过下拉列表自身也要显示，防止无法点击下拉列表 function(){$('#newsarea-menu').show();},function(){$('#newsarea-menu').show();})})</script>
