使用css+js构造的无限级菜单

先看看效果：

html代码：

< html >
< head >
< style >
ul#menu, ul#menu ul {
list-style : none ;
margin : 0 ;
border-bottom : 1px solid #DDD ;
border-right : 1px solid #DDD ;
border-left : 1px solid #DDD ;
width : 150px ;
padding : 0 ;
font-size : 14px ;
}
ul#menu li {
border-top : 1px solid #DDD ;
position : relative ;
padding : 4px ;

}
ul#menu li ul {
position : absolute ;
left : 150px ;
_left : 144px ;
top : 0 ;
display : none ;
}
ul#menu li.over {
background : #EEE ;
}
ul#menu li.out {
background : #fff ;
}
ul#menu a {
display : block ;
text-decoration : none ;
color : #000 ;
_height : 0 ;
}
</ style >
< script type ="text/javascript" >
function initMenu(event,ul){
if ( ! ul) ul = document.getElementById( " menu " );
li = ul.getElementsByTagName( " li " );
for (i = 0 ;i < li.length;i ++ )
{
li[i].onmouseover = function (){
try {
this .className = ' over ' ;
this .getElementsByTagName( " ul " )[ 0 ].style.display = " block " ;
} catch (e){};
}
li[i].onmouseout = function (){
try {
this .className = ' out ' ;
this .getElementsByTagName( " ul " )[ 0 ].style.display = " none " ;
} catch (e){};
}
}
}
window.onload = initMenu;
</ script >
</ head >
< body >
< ul id ="menu" >
< li >
这是菜单1
< ul >
< li >
这是菜单1
< ul >
< li >< a href ="#" >这是子菜单 </ a ></ li >
< li >
这是菜单1
< ul >
< li >< a href ="#" >这是子菜单 </ a ></ li >
< li >< a href ="#" >这是子菜单 </ a ></ li >
< li >
这是菜单1
< ul >
< li >< a href ="#" >这是子菜单 </ a ></ li >
< li >
这是菜单1
< ul >
< li >< a href ="#" >这是子菜单 </ a ></ li >
< li >< a href ="#" >这是子菜单 </ a ></ li >
< li >< a href ="#" >这是子菜单 </ a ></ li >
</ ul >
</ li >
< li >< a href ="#" >这是子菜单 </ a ></ li >
</ ul >
</ li >
</ ul >
</ li >
< li >< a href ="#" >这是子菜单 </ a ></ li >
</ ul >
</ li >
< li >
这是菜单1
< ul >
< li >< a href ="#" >这是子菜单 </ a ></ li >
< li >< a href ="#" >这是子菜单 </ a ></ li >
< li >< a href ="#" >这是子菜单 </ a ></ li >
</ ul >
</ li >
< li >< a href ="#" >这是子菜单 </ a ></ li >
</ ul >
</ li >
< li >
这是菜单2
< ul >
< li >< a href ="#" >这是子菜单 </ a ></ li >
< li >< a href ="#" >这是子菜单 </ a ></ li >
< li >< a href ="#" >这是子菜单 </ a ></ li >
</ ul >
</ li >
< li >
这是菜单3
< ul >
< li >< a href ="#" >这是子菜单 </ a ></ li >
< li >< a href ="#" >这是子菜单 </ a ></ li >
< li >< a href ="#" >这是子菜单 </ a ></ li >
</ ul >
</ li >
</ ul >
</ body >
</ html >