css div ul li下拉菜单代码 2_html/css_WEB-ITnose

 

转自http://www.fzl-web.com/news/www/JSJL/2008/144.html

 
 
      
          
         CSS Menu - Horizontal title >  
          
         
            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#navmenu li.iehover li.iehover li.iehover li a  {  
                background :  #EEE ;  
                color :  #666 ;  
             }  
             /*  4th Menu Hover  */  
            ul#navmenu li:hover li:hover li:hover li a:hover, 
            ul#navmenu li.iehover li.iehover li.iehover li 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#navmenu li:hover ul ul ul, 
            ul#navmenu li.iehover ul ul, 
            ul#navmenu li.iehover ul ul ul  {  
                display :  none ;  
             }  
            ul#navmenu li:hover ul, 
            ul#navmenu ul li:hover ul, 
            ul#navmenu ul ul li:hover ul, 
            ul#navmenu li.iehover ul, 
            ul#navmenu ul li.iehover ul, 
            ul#navmenu ul ul li.iehover ul  {  
                display :  block ;  
             }  
         style >  
          
            navHover  =   function () { 
                 var  lis  =  document.getElementById( " navmenu " ).getElementsByTagName( " LI " ); 
                 for  ( var  i = 0 ; 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); 
         script >  
     head >  
      
         CSS Menu - Horizontal h1 >  
          
          
             Blog a > li >  
             Work + a >  
                  
                     Websites + a >  
                          
                             qrayg a > li >  
                             qArcade a > li >  
                             qLoM a > li >  
                             qDT a > li >  
                         ul >  
                     li >  
                     Pen and Ink a > li >  
                     Free Interfaces a > li >  
                 ul >  
             li >  
             Learn + a >  
                  
                     Fireworks + font > a >  
                          
                             aquaButton a > li >  
                             aquaButton2 a > li >  
                             waterDrop a > li >  
                             lightFX a > li >  
                             lightFX2 a > li >  
                         ul >  
                     li >  
                     CSS + a >  
                        
                           footerStick a > li >  
                           spriteNav a > li >  
                           @import a > li >  
                       ul >  
                     li >  
                    ul >  
             li >  
             Info a > li >  
             Contact a > li >  
         ul >  
     body >  
html >