演示：http://www.purewhite.cn/demo/20060330001/ 源代码如下： HTML: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>菜单</title> <style type="text/css"> .menu { font-size: 12px; position: absolute; width: 70px; visibility: hidden; top: 0px; left: 0px; border: 1px solid #6588ba; background-color: #fff; padding: 1px; text-align: left; } .menu ul { padding: 0; margin: 0; list-style: none; } .menu li { padding: 2px; } .menu a { text-decoration: none; display: block; padding: 1px; } .menu a:link, .menu a:visited { color: #000; background: #fff; } .menu a:hover, .menu a:active { color: #fff; background: #6588ba; } </style> <script language="javascript" type="text/javascript"> var oMenu; // 全局变量，菜单 function showMenu(obj, menuID) { oMenu = document.getElementById("menu_" + menuID); oMenu.style.left = findPosX(obj) + "px"; oMenu.style.top = findPosY(obj) + obj.offsetHeight + "px"; oMenu.style.visibility = "visible"; } function hideMenu() { if (oMenu) { oMenu.style.visibility = 'hidden'; } } function findPosX(obj) { var iPosLeft = 0; while (obj.offsetParent) { iPosLeft += obj.offsetLeft; obj = obj.offsetParent; } return iPosLeft; } function findPosY(obj) { var iPosTop = 0; while (obj.offsetParent) { iPosTop += obj.offsetTop; obj = obj.offsetParent; } return iPosTop; } </script> </head> <body> <img src="http://bbs.chinahtml.com/images/misc/vbulletin3_logo_white.gif" width="180" height="60" alt="ChinaHTML Logo" onclick="showMenu(this, 1);" /> <div class="menu" id="menu_1"> <ul> <li><a href="#" onclick="hideMenu();">菜单一</a></li> <li><a href="#" onclick="hideMenu();">菜单二</a></li> <li><a href="#" onclick="hideMenu();">菜单三</a></li> <li><a href="#" onclick="hideMenu();">菜单四</a></li> <li><a href="javascript: hideMenu();">关闭</a></li> </ul> </div> </body> </html> 原理分析： 通过图片的位置，来定位菜单的显示位置。 findPosX() 和 findPosY() 通过递归的方式来计算当前对象在文档中 X 和 Y 坐标。 offsetHeight 确定当前对象的高度，使菜单在当前对象上产生向下的 Y 坐标偏移。 其它的，就是通过设置菜单的 visibility 属性来控制菜单的显隐。
要让菜单出现滚动条，模拟下拉选择，可以设置菜单高度，并且设置 X 和 Y 向的溢出。例如： 代码: .menu { font-size: 12px; position: absolute; width: 70px; height: 100px; visibility: hidden; top: 0px; left: 0px; border: 1px solid #6588ba; background-color: #fff; padding: 1px; text-align: left; overflow-y: scroll; overflow-x: hidden; }
我改了个东西，看看适合不 我想来想去都觉得不太合理，不过又可以用:lol: 代码: var oMenu; // 全局变量，菜单 var state=true; function showMenu(obj, menuID) { oMenu = document.getElementById("menu_" + menuID); oMenu.style.left = findPosX(obj); oMenu.style.top = findPosY(obj) + obj.offsetHeight; oMenu.style.visibility = "visible"; if (oMenu && state) { oMenu.style.visibility = 'visible'; state=false; } else { oMenu.style.visibility = 'hidden'; state=true; } } function hideMenu() { if (oMenu) { oMenu.style.visibility = 'hidden'; } }