单击后弹出的下拉菜单代码
代码简介：
一款别致、漂亮、操作形式新颖的下拉菜单，一般的下拉菜单都是在鼠标滑过的时候出现菜单，这一款则是在点击后才激活下拉菜单，个人感觉这种比滑动的更方便于用户，让用户随心所欲的操作，这是最重要的。
代码内容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>单击后弹出的下拉菜单代码_网页代码站(www.webdm.cn)</title>
<style>
#outer {width:748px; height:300px; background:url(clock.jpg) no-repeat right bottom; border:1px solid #ddd;
border-width:5px 1px 1px; position:relative;}
#menu {list-style-type:none; width:644px; padding:0; margin:0 auto;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#088; margin:1px 1px 0 0;position:relative;}
#menu li.sub {background:#f80;}
/*/*/
#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:24px;
width:160px; text-decoration:none; text-align:center; cursor:pointer; font-weight:bold;}
#menu li:hover, #menu li a:hover {background:#c00;}
#menu ul {position:absolute;left:-9999px;width:128px;}
#menu li.click {background:#c00;}
#menu li.click ul{left:0; top:24px;
</style>
<script type="text/javascript">
clickMenu = function(menu) {
var getEls = document.getElementById(menu).getElementsByTagName("LI");
var getAgn = getEls;
for (var i=0; i<getEls.length; i++) {
getEls[i].onclick=function() {
for (var x=0; x<getAgn.length; x++) {
getAgn[x].className=getAgn[x].className.replace("unclick", "");
getAgn[x].className=getAgn[x].className.replace("click", "unclick");
}
if ((this.className.indexOf('unclick'))!=-1) {
this.className=this.className.replace("unclick", "");;
}
else {
this.className+=" click";
}
}
}
}
</script>
</head>
<body onload="clickMenu('menu')">
<ul id="menu">
<li class="sub">ASP Codes
<ul>
<li><a href="http://www.webdm.cn">聊天留言</a></li>
<li><a href="/">企业建站</a></li>
<li><a href="/">论坛社区</a></li>
</ul>
</li>
<li class="sub">PHP Codes
<ul>
<li><a href="http://www.webdm.cn">影音视频</a></li>
<li><a href="/">商务商城</a></li>
<li><a href="/">查询搜索</a></li>
</ul>
</li>
<li class="sub">eShop
<ul>
<li><a href="/">图片相册</a></li>
<li><a href="/">主机邮件</a></li>
<li><a href="/">动画娱乐</a></li>
</ul>
</li>
<li class="sub">网页代码站<ul>
<li><a href="/">文件管理</a></li>
<li><a href="/">Ajax相关</a></li>
<li><a href="/">综合其它</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>
代码来自：http://www.webdm.cn/webcode/136fb897-716e-4793-add8-3716c7e7630e.html
