<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style type="text/css"> * { padding: 0; margin: 0; list-style: none; } .all { width: 330px; height: 30px; background: url(img/bg.jpg) no-repeat; margin: 100px auto; line-height: 30px; text-align: center; padding-left: 10px; margin-bottom: 0; } .all ul li { width: 100px; height: 30px; background: url(img/libg.jpg); float: left; margin-right: 10px; position: relative; cursor: pointer; } .all ul ul { position: absolute; left: 0; top: 30px; display: none; } </style> </head> <body> <div class="all"> <ul id="list"> <li>一级菜单 <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单 <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单 <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> </ul> </div> </body> </html> <script> window.onload = function () { new ListMenu().init(); } function ListMenu() { this.list = list.children; this.init = function () { for (let i = 0; i < this.list.length; i++) { this.list[i].onmouseenter = function () { this.show(this.list[i].children[0]); }.bind(this) this.list[i].onmouseleave = function () { this.hide(this.list[i].children[0]); }.bind(this) } } this.show = function (obj) { obj.style.display = "block"; } this.hide = function (obj) { obj.style.display = "none"; } } </script>