1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title> 7 下拉标题 8 </title> 9 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" 10 type="text/javascript"> 11 </script> 12 <script> 13 $().ready(function() { 14 $("ul").each(function() { 15 var id = "#" + $(this).attr("id"); 16 $(id + " li:gt(0)").each(function() { 17 $(this).css({ 18 "display": "none" 19 }); 20 }); 21 $(this).mouseover(function() { 22 $(id + " li:gt(0)").each(function() { 23 $(this).css({ 24 "display": "block" 25 }); 26 }); 27 }); 28 $(this).mouseout(function() { 29 $(id + " li:gt(0)").each(function() { 30 $(this).css({ 31 "display": "none" 32 }); 33 }); 34 }); 35 }); 36 }); 37 </script> 38 <style type="text/css"> 39 *{ margin:0px; padding:0px;} ul{ float:left; margin-left:3px; } li{ list-style:none; 40 width:150px; line-height:35px; background-color:black; margin-bottom:3px; 41 text-align:center; height:35px;cursor:pointer;} a{ color:white;} 42 </style> 43 </head> 44 45 <body> 46 <ul id="a"> 47 <li> 48 <a href="http://www.baidu.com"> 49 1 50 </a> 51 </li> 52 <li> 53 <a href="http://www.baidu.com"> 54 2 55 </a> 56 </li> 57 <li> 58 <a href="http://www.baidu.com"> 59 3 60 </a> 61 </li> 62 <li> 63 <a href="http://www.baidu.com"> 64 4 65 </a> 66 </li> 67 </ul> 68 <ul id="b"> 69 <li> 70 <a href="http://www.baidu.com"> 71 1 72 </a> 73 </li> 74 <li> 75 <a href="http://www.baidu.com"> 76 2 77 </a> 78 </li> 79 <li> 80 <a href="http://www.baidu.com"> 81 3 82 </a> 83 </li> 84 <li> 85 <a href="http://www.baidu.com"> 86 4 87 </a> 88 </li> 89 </ul> 90 <ul id="c"> 91 <li> 92 <a href="http://www.baidu.com"> 93 1 94 </a> 95 </li> 96 <li> 97 <a href="http://www.baidu.com"> 98 2 99 </a> 100 </li> 101 <li> 102 <a href="http://www.baidu.com"> 103 3 104 </a> 105 </li> 106 <li> 107 <a href="http://www.baidu.com"> 108 4 109 </a> 110 </li> 111 </ul> 112 <ul id="d"> 113 <li> 114 <a href="http://www.baidu.com"> 115 1 116 </a> 117 </li> 118 <li> 119 <a href="http://www.baidu.com"> 120 2 121 </a> 122 </li> 123 <li> 124 <a href="http://www.baidu.com"> 125 3 126 </a> 127 </li> 128 <li> 129 <a href="http://www.baidu.com"> 130 4 131 </a> 132 </li> 133 </ul> 134 </body> 135 136 </html>