使用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 >