<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <style type="text/css"> body, ul, li { margin: 0; padding: 0; font-size: 13px; } ul, li { list-style: none; } #divselect { width: 186px; margin: 80px auto; position: relative; z-index: 10000; } #divselect cite { width: 150px; height: 24px; line-height: 24px; display: block; color: #807a62; cursor: pointer; font-style: normal; padding-left: 4px; padding-right: 30px; border: 1px solid #333333; background: url(xjt.png) no-repeat right center; } #divselect ul { width: 184px; border: 1px solid #333333; background-color: #ffffff; position: absolute; z-index: 20000; margin-top: -1px; display: none; } #divselect ul li { height: 24px; line-height: 24px; } #divselect ul li a { display: block; height: 24px; color: #333333; text-decoration: none; padding-left: 10px; padding-right: 10px; } </style> <script type="text/javascript"> window.onload = function() { var box = document.getElementById('divselect'), title = box.getElementsByTagName('cite')[0], menu = box.getElementsByTagName('ul')[0], as = box.getElementsByTagName('a'), index = -1; // 点击三角时 title.onclick = function(event) { event = event || window.event; menu.style.display = 'block'; if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } document.onkeyup = function(event) { event = event || window.event; if (event.keyCode == 40) { index++; if (index >= as.length) index = 0; for (var i = 0; i < as.length; i++) { as[i].style.background = '#fff'; } as[index].style.background = '#ccc'; } if (event.keyCode == 38) { index--; if (index < 0) index = as.length - 1; for (var i = 0; i < as.length; i++) { as[i].style.background = '#fff'; } as[index].style.background = '#ccc'; } if (event.keyCode == 13) { for (var i = 0; i < as.length; i++) { as[i].style.background = '#fff'; } title.innerHTML = as[index].innerHTML; menu.style.display = 'none'; } } } // 滑过滑过、离开、点击每个选项时 for (var i = 0; i < as.length; i++) { as[i].num = i as[i].onmouseover = function() { this.style.background = '#ccc' index = as[i].num - 1; } as[i].onmouseout = function() { this.style.background = '#fff' } as[i].onclick = function(event) { event = event || window.event; if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } menu.style.display = 'none'; title.innerHTML = this.innerHTML; } } // 点击页面空白处时 document.onclick = function() { menu.style.display = 'none'; } } </script> </head> <body> <div id="divselect"> <cite>请选择分类</cite> <ul> <li id="li"><a href="javascript:;" selectid="1">ASP开发</a></li> <li><a href="javascript:;" selectid="2">.NET开发</a></li> <li><a href="javascript:;" selectid="3">PHP开发</a></li> <li><a href="javascript:;" selectid="4">Javascript开发</a></li> <li><a href="javascript:;" selectid="5">Java特效</a></li> </ul> </div> </body> </html> </body> </html>