在网页版的csdn中，当用户将鼠标悬浮在头像框上时，会自动显示一个下拉菜单，这篇博客实现的就是这样的功能，但在文章内只记录核心的功能，不对样式做过多修饰
效果如下：
下拉菜单的显示隐藏只需要设置display的属性就好了，在这个功能中的核心问题是，下拉菜单的位置
结合实际来考虑，下拉菜单和头像需要放在同一容器中。当用户打开下拉菜单需要使用其中的功能时，鼠标位置必然转移，若此时离开头像所在容器的范围，就会触发onmouseout()事件，调用函数，下拉菜单收起。因此头像和下拉菜单必须存放在同一容器中
不同容器的效果图放在文章最后。
前端代码
<div id="nav" onmouseover="block()" onmouseout="cancel()"><img id="img" src="./image/1.jpg" alt=""><div id="menu"><ul><li></li><li>设置</li><li>个人中心</li><li>内容管理</li><li>退出登录</li></ul></div></div>
JS代码
<script>function block(){document.getElementById("menu").style="display:block";}function cancel(){document.getElementById("menu").style="display:none";}</script>
