最近几日，突然对Javascript非常兴趣，就想用Javascript实现几个经常都实现的特效，虽然对于javascript一直能够做一些开发，但还是使用很少。
首先我想实现的就是一个下拉样式的树，在实现之前，我就想到结构一定要很简单，我想将菜单的结构做成一个最简单的结构样式，经过约5个小时的奋斗，终于完成初步的实现，先将代码贴下：
代码 <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="/1999/xhtml">
<head>
<title>Dropmenu</title>
<styletype="text/css">
body
{
font-size:12px;
}
.dropMenu
{
background-color:Red;
height:27px;
}
.dropMenuul
{
padding:0px;
margin:0px;
}
.dropMenua
{
border:solid1px#00ff00;
display:block;
}
.dropMenuulli
{
list-style-type:none;
border:solid1px#00ff00;
float:left;
padding:5px;
cursor:hand;
}
.dropMenuulul
{
background-color:red;
width:140px;
display:none;
z-index:10;
}
.dropMenuululli
{
float:none;
}
</style>
<scriptlanguage="javascript"type="text/javascript">
functionopenDropMenu(sender){
varnextNode=sender.nextSibling;
vardropMenu=sender.parentNode;
//隐藏所有的下拉列表；
for(vari=0;i<dropMenu.childNodes.length;i++){
if(dropMenu.childNodes[i].nodeName.toLowerCase()=='ul'&&
dropMenu.childNodes[i].style.display=='block'){
closeDropMenu(dropMenu.childNodes[i]);
}
}
if(nextNode.nodeName.toLowerCase()=="ul"){
nextNode.style.left=sender.offsetLeft;
nextNode.style.top=sender.offsetTop+sender.offsetHeight;
nextNode.style.position="absolute";
nextNode.style.display='block';
}
document.onclick=function(){
document.onclick='';
//alert(sender.innerText);
closeDropMenu(nextNode);
};
}
functionopenDropSubMenu(sender){
varnextNode=sender.nextSibling;
varulNode=sender.parentNode;
for(vari=0;i<ulNode.childNodes.length;i++){
if(ulNode.childNodes[i].nodeName.toLowerCase()=='ul'){
closeDropMenu(ulNode.childNodes[i]);
}
}
if(nextNode!=null&&nextNode.nodeName.toLowerCase()=="ul"){
//nextNode.style.border="solid1px#0000ff";
nextNode.style.position="absolute";
nextNode.style.left=sender.offsetLeft+sender.offsetWidth;
nextNode.style.top=sender.offsetTop;
nextNode.style.display="block";
}
}
//关闭下接菜单
functioncloseDropMenu(subMenu){
if(subMenu==null||subMenu.style.display=='none')return;
//关闭子菜单
for(vari=0;i<subMenu.childNodes.length;i++){
if(subMenu.childNodes[i].nodeName.toLowerCase()=='ul'){
closeDropMenu(subMenu.childNodes[i]);
}
}
//关闭当前菜单。
subMenu.style.display='none';
}
</script>
</head>
<body>
<h1>DropMenuExample</h1>
<divclass="dropMenu">
<ul>
<li>Normal</li>
<lionmouseover="openDropMenu(this);">关于公司</li>
<ul>
<li>NormalSubMenuA</li>
<lionmouseover="openDropSubMenu(this);"><ahref="">Google</a></li>
<ul>
<lionmouseover="openDropSubMenu(this);">二级子菜单AA</li>
<lionmouseover="openDropSubMenu(this);">二级子菜单AB</li>
<ul>
<lionmouseover="openDropSubMenu(this);">三级子菜单BA</li>
<lionmouseover="openDropSubMenu(this);">三级子菜单BB</li>
<lionmouseover="openDropSubMenu(this);">三级子菜单BC</li>
<ul>
<li><ahref=''>白度</a></li>
<li>四级菜单</li>
<li>四级菜单</li>
</ul>
</ul>
</ul>
<lionmouseover="openDropSubMenu(this);">关于一级子菜单B</li>
<ul>
<li>二级子菜单BA</li>
<li>二级子菜单BB</li>
<li>二级子菜单BC</li>
</ul>
<lionmouseover="openDropSubMenu(this);">关于一级子菜单C</li>
<ul>
<li>二级子菜单CA</li>
<li>二级子菜单CB</li>
<li>二级子菜单CC</li>
<li>二级子菜单CD</li>
</ul>
<lionmouseover="openDropSubMenu(this);">关于一级子菜单D</li>
<ul>
<li>二级子菜单DA</li>
<li>二级子菜单DB</li>
<li>二级子菜单DC</li>
<li>二级子菜单DD</li>
<li>二级子菜单DE</li>
</ul>
<lionmouseover="openDropSubMenu(this);">关于一级子菜单E</li>
<ul>
<li>二级子菜单EA</li>
<li>二级子菜单EB</li>
<li>二级子菜单EC</li>
<li>二级子菜单ED</li>
</ul>
</ul>
<lionmouseover="openDropMenu(this);">解决方案</li>
<ul>
<li>解决方案一级子菜单A</li>
<ul>
<li>二级子菜单AA</li>
<li>二级子菜单AB</li>
</ul>
<li>解决方案一级子菜单B</li>
<ul>
<li>二级子菜单BA</li>
<li>二级子菜单BB</li>
<li>二级子菜单BC</li>
</ul>
<li>解决方案一级子菜单C</li>
<ul>
<li>二级子菜单CA</li>
<li>二级子菜单CB</li>
<li>二级子菜单CC</li>
<li>二级子菜单CD</li>
</ul>
<li>解决方案一级子菜单D</li>
<ul>
<li>二级子菜单DA</li>
<li>二级子菜单DB</li>
<li>二级子菜单DC</li>
<li>二级子菜单DD</li>
<li>二级子菜单DE</li>
</ul>
<li>解决方案一级子菜单E</li>
<ul>
<li>二级子菜单EA</li>
<li>二级子菜单EB</li>
<li>二级子菜单EC</li>
<li>二级子菜单ED</li>
</ul>
</ul>
</ul>
</div>
</body>
</html>本
本方法利用简单的ul与li标签实现菜单的结构，看起来非常自然，但还有一些问题，主要包括在以下方面：
1.没有实现在FireFox中显示出同样的效果；
2.还没有增加任何对菜单项目的CSS样式；
3.还想做成，只要在DIV中提供一个CSS样式就能够自动增加子项目的CSS样式和JAVASCRIPT代码，不在界面中做更做设置，简化界面的设置；
详细功能现在没有时间来进行说明，先将代码贴上；
