JS UL下拉菜单

<! DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"  lang ="zh-CN" >
< head >
     < meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
     < title > css菜单演示 </ title >
     < style  type ="text/css" >
        * { margin : 0 ; padding : 0 ; border : 0 ; }
        body
         {
            font-family :  arial, 宋体, serif ;
            font-size :  12px ;
         }
        #nav
         {
            line-height :  24px ;
            list-style-type :  none ;
            background :  #666 ;
         }
        #nav a
         {
            display :  block ;
            width :  80px ;
            text-align :  center ;
         }
        #nav a:link
         {
            color :  #666 ;
            text-decoration :  none ;
         }
        #nav a:visited
         {
            color :  #666 ;
            text-decoration :  none ;
         }
        #nav a:hover
         {
            color :  #FFF ;
            text-decoration :  none ;
            font-weight :  bold ;
         }
        #nav li
         {
            float :  left ;
            width :  80px ;
            background :  #CCC ;
         }
        #nav li a:hover
         {
            background :  #999 ;
         }
        #nav li ul
         {
            line-height :  27px ;
            list-style-type :  none ;
            text-align :  left ;
            left :  -999em ;
            width :  180px ;
            position :  absolute ;
         }
        #nav li ul li
         {
            float :  left ;
            width :  180px ;
            background :  #F6F6F6 ;
         }
        #nav li ul a
         {
            display :  block ;
            width :  156px ;
            text-align :  left ;
            padding-left :  24px ;
         }
        #nav li ul a:link
         {
            color :  #666 ;
            text-decoration :  none ;
         }
        #nav li ul a:visited
         {
            color :  #666 ;
            text-decoration :  none ;
         }
        #nav li ul a:hover
         {
            color :  #F3F3F3 ;
            text-decoration :  none ;
            font-weight :  normal ;
            background :  #C00 ;
         }
        #nav li:hover ul
         {
            left :  auto ;
         }
        #nav li.sfhover ul
         {
            left :  auto ;
         }
        #nav li.sfout ul
         {
            line-height :  27px ;
            list-style-type :  none ;
            text-align :  left ;
            left :  -999em ;
            width :  180px ;
            position :  absolute ;
         }
        #content
         {
            clear :  left ;
         }
         </ style >

< script  type ="text/javascript" >
function  menuFix() {
  var  sfEls  =  document.getElementById( " nav " ).getElementsByTagName( " li " );

  for  ( var  i = 0 ; i < sfEls.length; i ++ ) {
    sfEls[i].onmouseover = function () {
         this .className = " sfhover " ;
    }
    sfEls[i].onmousedown = function () {
         this .className = " sfhover " ;
    }
    sfEls[i].onmouseup = function () {
         this .className = " sfhover " ;
    }
    sfEls[i].onmouseout = function () {
         this .className = " sfout " ;
    }
 }
}
window.onload = menuFix;
</ script >

</ head >
< body >
     < ul  id ="nav" >
         < li >< a  href ="#" > 产品介绍 </ a >
             < ul >
                 < li >< a  href ="#" > 产品一 </ a ></ li >
                 < li >< a  href ="#" > 产品一 </ a ></ li >
                 < li >< a  href ="#" > 产品一 </ a ></ li >
                 < li >< a  href ="#" > 产品一 </ a ></ li >
                 < li >< a  href ="#" > 产品一 </ a ></ li >
                 < li >< a  href ="#" > 产品一 </ a ></ li >
             </ ul >
         </ li >
         < li >< a  href ="#" > 服务介绍 </ a >
             < ul >
                 < li >< a  href ="#" > 服务二 </ a ></ li >
                 < li >< a  href ="#" > 服务二 </ a ></ li >
                 < li >< a  href ="#" > 服务二 </ a ></ li >
                 < li >< a  href ="#" > 服务二服务二 </ a ></ li >
                 < li >< a  href ="#" > 服务二服务二服务二 </ a ></ li >
                 < li >< a  href ="#" > 服务二 </ a ></ li >
             </ ul >
         </ li >
         < li >< a  href ="#" > 成功案例 </ a >
             < ul >
                 < li >< a  href ="#" > 案例三 </ a ></ li >
                 < li >< a  href ="#" > 案例 </ a ></ li >
                 < li >< a  href ="#" > 案例三案例三 </ a ></ li >
                 < li >< a  href ="#" > 案例三案例三案例三 </ a ></ li >
             </ ul >
         </ li >
         < li >< a  href ="#" > 关于我们 </ a >
             < ul >
                 < li >< a  href ="#" > 我们四 </ a ></ li >
                 < li >< a  href ="#" > 我们四 </ a ></ li >
                 < li >< a  href ="#" > 我们四 </ a ></ li >
                 < li >< a  href ="#" > 我们四111 </ a ></ li >
             </ ul >
         </ li >
         < li >< a  href ="#" > 在线演示 </ a >
             < ul >
                 < li >< a  href ="#" > 演示 </ a ></ li >
                 < li >< a  href ="#" > 演示 </ a ></ li >
                 < li >< a  href ="#" > 演示 </ a ></ li >
                 < li >< a  href ="#" > 演示演示演示 </ a ></ li >
                 < li >< a  href ="#" > 演示演示演示 </ a ></ li >
                 < li >< a  href ="#" > 演示演示 </ a ></ li >
                 < li >< a  href ="#" > 演示演示演示 </ a ></ li >
                 < li >< a  href ="#" > 演示演示演示演示演示 </ a ></ li >
             </ ul >
         </ li >
         < li >< a  href ="#" > 联系我们 </ a >
             < ul >
                 < li >< a  href ="#" > 联系联系联系联系联系 </ a ></ li >
                 < li >< a  href ="#" > 联系联系联系 </ a ></ li >
                 < li >< a  href ="#" > 联系 </ a ></ li >
                 < li >< a  href ="#" > 联系联系 </ a ></ li >
                 < li >< a  href ="#" > 联系联系 </ a ></ li >
                 < li >< a  href ="#" > 联系联系联系 </ a ></ li >
                 < li >< a  href ="#" > 联系联系联系 </ a ></ li >
             </ ul >
         </ li >
     </ ul >
</ body >
</ html >

转载于:https://www.cnblogs.com/yuji/archive/2011/03/29/1998677.html