鼠标经过的时候，下拉内容显示；鼠标离开的时候，下拉内容隐藏。
<htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><style> * { margin: 0; padding: 0; } li { list-style-type: none; } a { text-decoration: none; font-size: 14px; } .nav { margin: 100px; } .nav>li { position: relative; float: left; width: 80px; height: 41px; text-align: center; } .navlia { display: block; width: 100%; height: 100%; line-height: 41px; color: #333; } .nav>li>a:hover { background-color: #eee; } .navul { display: none; position: absolute; top: 41px; left: 0; width: 100%; border-left: 1pxsolid#FECC5B; border-right: 1pxsolid#FECC5B; } .navulli { border-bottom: 1pxsolid#FECC5B; } .navullia:hover { background-color: #FFF5DA; } </style></head><body><ulclass="nav"><li><ahref="#">微博</a><ul><li><ahref="">私信</a></li><li><ahref="">评论</a></li><li><ahref="">@我</a></li></ul></li><li><ahref="#">微博</a><ul><li><ahref="">私信</a></li><li><ahref="">评论</a></li><li><ahref="">@我</a></li></ul></li><li><ahref="#">微博</a><ul><li><ahref="">私信</a></li><li><ahref="">评论</a></li><li><ahref="">@我</a></li></ul></li><li><ahref="#">微博</a><ul><li><ahref="">私信</a></li><li><ahref="">评论</a></li><li><ahref="">@我</a></li></ul></li></ul><script>// 1. 获取元素varnav=document.querySelector('.nav'); varlis=nav.children; // 得到4个小li// 2.循环注册事件for (vari=0; i<lis.length; i++) { lis[i].onmouseover=function() { this.children[1].style.display='block'; } lis[i].onmouseout=function() { this.children[1].style.display='none'; } } </script></body></html>
