1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 2 3 02 < html xmlns ="http://www.w3.org/1999/xhtml" > 4 5 03 < head > 6 7 04 < meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" /> 8 9 05 < title >jQuery下拉菜单 </ title > 10 11 06 < script type ='text/javascript' src ='/ajaxjs/jquery1.3.2.js' ></ script > 12 13 07 < style type ="text/css" > 14 15 08 ul { margin : 0 ; padding : 0 ; } 16 17 09 ul li { list-style : none } 18 19 10 #div { width : 960px ; height : 28px ; } 20 21 11 #div ul li { float : left ; height : 28px ; display : inline ; line-height : 28px ; padding : 0px 20px ; position : relative ; } 22 23 12 #div ul li ul { position : absolute ; z-index : 99 ; display : none ; top : 28px ; width : 140px ; left : 0px ; } 24 25 13 #div ul li ul li { display : block ; width : 140px ; height : 26px ; line-height : 26px ; background-color : #666 ; border-bottom : 1px #FFFFFF solid ; } 26 27 14 #div ul li a { color : #000000 ; text-decoration : none ; } 28 29 15 </ style > 30 31 16 < script type ="text/javascript" > 32 33 17 $( function (){ 34 35 18 $( " #div ul li " ).hover( function (){ 36 37 19 $( this ).css( " background " , " #333333 " ).children( " ul " ).slideDown(); 38 39 20 }, function (){ 40 41 21 $( this ).css( " background " , " #fff " ).children( " ul " ).slideUp(); 42 43 22 }) 44 45 23 $( " #div ul li ul li " ).hover( function (){ 46 47 24 $( this ).css( " background " , " #333 " ); 48 49 25 }, function (){ 50 51 26 $( this ).css( " background " , " #666 " ); 52 53 27 }) 54 55 28 }) 56 57 29 </ script > 58 59 30 </ head > 60 61 31 < body > 62 63 32 < div id ="div" > 64 65 33 < ul > 66 67 34 < li >< a href ="#" >首页 </ a ></ li > 68 69 35 < li >< a href ="#" >企业资源 </ a > 70 71 36 < ul > 72 73 37 < li >企业资源 </ li > 74 75 38 < li >企业资源 </ li > 76 77 39 </ ul > 78 79 40 </ li > 80 81 41 < li >< a href ="#" >新闻中心 </ a > 82 83 42 < ul > 84 85 43 < li >新闻中心 </ li > 86 87 44 < li >新闻中心 </ li > 88 89 45 < li >新闻中心 </ li > 90 91 46 </ ul > 92 93 47 </ li > 94 95 48 < li >< a href ="#" >工程业绩 </ a > 96 97 49 < ul > 98 99 50 < li >工程业绩 </ li > 100 101 51 < li >工程业绩 </ li > 102 103 52 < li >工程业绩 </ li > 104 105 53 </ ul > 106 107 54 </ li > 108 109 55 < li >< a href ="#" >仪器设备 </ a > 110 111 56 < ul > 112 113 57 < li >仪器设备 </ li > 114 115 58 < li >仪器设备 </ li > 116 117 59 </ ul > 118 119 60 </ li > 120 121 61 < li >< a href ="#" >企业文化 </ a > 122 123 62 < ul > 124 125 63 < li >企业文化 </ li > 126 127 64 < li >企业文化 </ li > 128 129 65 </ ul > 130 131 66 </ li > 132 133 67 < li >< a href ="#" >联系我们 </ a > 134 135 68 < ul > 136 137 69 < li >联系我们 </ li > 138 139 70 < li >联系我们 </ li > 140 141 71 < li >联系我们 </ li > 142 143 72 </ ul > 144 145 73 </ li > 146 147 74 </ ul > 148 149 75 </ div > 150 151 76 </ div > 152 153 77 </ body > 154 155 78 </ html >