<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>下拉菜单</title>
<link rel="stylesheet" href="index.css">
<script src="script.js"></script>
</head>
<body>
<div id="nav">
<ul>
<li><a href="">首页</a></li>
<li><a href="" id="li">简介</a>
<ul id="subnav">
<li><a href="">名称</a></li>
<li><a href="">获奖详情</a></li>
</ul>
</li>
<li><a href="">历史</a></li>
<li><a href="">机构</a></li>
<li><a href="">新闻</a></li>
<li><a href="">关于我们</a></li>
</ul>
</div>
</body>
</html>
这是案例，由于自己代码不方便上传，所以代码是复制CSDN的博主 cho_jun的博客 的。其中给我最大的提示来解决这个问题的是 其中看到他的js代码和注释，谢谢老哥，解决了我几天来困扰的问题，本人小菜鸡一枚，不喜勿喷!
menu.οnmοuseοver=over; //鼠标在一级列表上面时，显示
subMenu.οnmοuseοver=over; //鼠标在二级列表上面时，显示
menu.οnmοuseοut=out; //鼠标在一级列表上面时，不显示
subMenu.οnmοuseοut=out; //鼠标在二级列表上面时，不显示
如果没有第二行和第四行，就会出现不能点击二级列表的问题，也就是一旦鼠标离开一级列表，二级列表马上消失。
恩，最后真的谢谢老哥！
原文地址：https://www.cnblogs.com/8023cyy/p/11275903.html