css div ul li drop-down menu code 2_html/css_WEB-ITnose

Reprinted from http://www.fzl-web.com/news/www/JSJL/2008/144.html

 
< html  xmlns ="http://www.w3.org/1999/xhtml" >  
     < head >  
         < meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />  
         < title > CSS Menu - Horizontal  
         < style  type ="text/css" >  
         
            body  {  
                margin :  0 ;  
                padding :  30px ;  
                background :  #FFF ;  
                color :  #666 ;  
             }  
            h1  {  
                font :  bold 16px Arial, Helvetica, sans-serif ;  
             }  
            p  {  
                font :  11px Arial, Helvetica, sans-serif ;  
             }  
            a  {  
                color :  #900 ;  
                text-decoration :  none ;  
             }  
            a:hover  {  
                background :  #900 ;  
                color :  #FFF ;  
             }  
             /* CSS Code for Menu Begin: */  
             /*  Root = Horizontal, Secondary = Vertical  */  
            ul#navmenu  {  
                margin :  0 ;  
                border :  0 none ;  
                padding :  0 ;  
                width :  500px ;   /* For KHTML */  
                list-style :  none ;  
                height :  24px ;  
             }  
            ul#navmenu li  {  
                margin :  0 ;  
                border :  0 none ;  
                padding :  0 ;  
                float :  left ;   /* For Gecko */  
                display :  inline ;  
                list-style :  none ;  
                position :  relative ;  
                height :  24px ;  
             }  
            ul#navmenu ul  {  
                margin :  0 ;  
                border :  0 none ;  
                padding :  0 ;  
                width :  160px ;  
                list-style :  none ;  
                display :  none ;  
                position :  absolute ;  
                top :  24px ;  
                left :  0 ;  
             }  
            ul#navmenu ul li  {  
                float :  none ;   /* For Gecko */  
                display :  block !important ;  
                display :  inline ;   /* For IE */  
             }  
             /*  Root Menu  */  
            ul#navmenu a  {  
                border :  1px solid #FFF ;  
                border-right-color :  #CCC ;  
                border-bottom-color :  #CCC ;  
                padding :  0 6px ;  
                float :  none !important ;   /* For Opera */  
                float :  left ;   /* For IE */  
                display :  block ;  
                background :  #EEE ;  
                color :  #666 ;  
                font :  bold 10px/22px Verdana, Arial, Helvetica, sans-serif ;  
                text-decoration :  none ;  
                height :  auto !important ;  
                height :  1% ;   /* For IE */  
             }  
             /*  Root Menu Hover Persistence  */  
            ul#navmenu a:hover, 
            ul#navmenu li:hover a, 
            ul#navmenu li.iehover a  {  
                background :  #CCC ;  
                color :  #FFF ;  
             }  
             /*  2nd Menu  */  
            ul#navmenu li:hover li a, 
            ul#navmenu li.iehover li a  {  
                float :  none ;  
                background :  #EEE ;  
                color :  #666 ;  
             }  
             /*  2nd Menu Hover Persistence  */  
            ul#navmenu li:hover li a:hover, 
            ul#navmenu li:hover li:hover a, 
            ul#navmenu li.iehover li a:hover, 
            ul#navmenu li.iehover li.iehover a  {  
                background :  #CCC ;  
                color :  #FFF ;  
             }  
             /*  3rd Menu  */  
            ul#navmenu li:hover li:hover li a, 
            ul#navmenu li.iehover li.iehover li a  {  
                background :  #EEE ;  
                color :  #666 ;  
             }  
             /*  3rd Menu Hover Persistence  */  
            ul#navmenu li:hover li:hover li a:hover, 
            ul#navmenu li:hover li:hover li:hover a, 
            ul#navmenu li.iehover li.iehover li a:hover, 
            ul#navmenu li.iehover li.iehover li.iehover a  {  
             background :  #CCC ;  
                color :  #FFF ;  
             }  
             /*  4th Menu  */  
           ul#navmenu li:hover li:hover li:hover li a, 
            ul#iehover li.hover li. 🎜>                background :  #EEE ;  
                color :  #666 ;  
             }  
             /*  4th Menu Hover  */  
           ul#navmenu li:hover li:hover li:hover li a:hover, 
a:hover  {  
                background :  #CCC ;  
                color :  #FFF ;  
             }  
            ul#navmenu ul ul, 
            ul#navmenu ul ul ul  {  
              display :  none ;  
                position :  absolute ;  
              top :  0 ;  
                left :  160px ;  
             }  
             /*  Do Not Move - Must Come Before display:block for Gecko  */  
          ul#navmenu li:hover ul ul, 
 ul ul:ul:
           ul#navmenu li.iehover ul ul, 
           ul#navmenu li.iehover ul ul ul  {  
                display :  none ;  
             }  
            ul#navmenu ul:hover ul, 
           ul#navmenu ul ul ul li:hover ul, 
           ul#navmenu ul ul li:hover ul,            ul#navmenu ul li.iehover ul, 
           ul#navmenu ul ul li.iehover ul  {  
              display :  block ;  
             }  
          
         < script  type ="text/JavaScript" >  
            navHover  =   function () { 
                 var  lis  =  document.getElementById( " navmenu " ).getElementsByTagName( " LI " ); 
                 for  ( var  i = 0 ; i < lis.length; i ) { 
                        lis[i].onmouseover = function () { 
                             this .className = "  iehover " ; 
                        } 
                        lis[i].onmouseout = function () { 
                             this .className = this .className.replace( new  RegExp( "  iehover\b " ),  "" ); 
                        } 
                } 
            } 
             if  (window.attachEvent) window.attachEvent( " onload " , navHover); 
          
      
     < body >  
         < h1 > CSS Menu - Horizontal  
         < hr  />  
         < ul  id ="navmenu" >  
             < li >< a  href ="#" > Blog  
             < li >< a  href ="#" > Work   
                 < ul >  
                     < li >< a  href ="#" > Websites   
                         < ul >  
                             < li >< a  href ="#" > qrayg  
                             < li >< a  href ="#" > qArcade  
                             < li >< a  href ="#" > qLoM  
                             < li >< a  href ="#" > qDT  
                          
                      
                     < li >< a  href ="#" > Pen and Ink  
                     < li >< a  href ="#" > Free Interfaces  
                  
              
             < li >< a  href ="#" > Learn   
                 < ul >  
                     < li >< a  href ="#" >< font  color =red > Fireworks   
                         < ul >  
                             < li >< a  href ="#" > aquaButton  
                             < li >< a  href ="#" > aquaButton2  
                             < li >< a  href ="#" > waterDrop  
                             < li >< a  href ="#" > lightFX  
                             < li >< a  href ="#" > lightFX2  
                          
                      
                     < li >< a  href ="#" > CSS   
                       < ul >  
                           < li >< a  href ="#" > footerStick  
                           < li >< a  href ="#" > spriteNav  
                           < li >< a  href ="#" > @import  
                        
                      
                     
              
             < li >< a  href ="#" > Info  
             < li >< a  href ="#" > Contact