学习JQUERY,写的简单下拉菜单!

HTML代码:

 

[html] view plaincopy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <script type="text/javascript" src="http://ajax.zuola.net/ajax/libs  
  5. /jquery/1.7.2/jquery.min.js"></script>  
  6.         <title>side menu</title>  
  7.     </head>  
  8.     <body>  
  9.         <div id="menu">  
  10.             <div class="m-one">  
  11.                 <span class="m-tit">主菜单01</span>  
  12.                 <ul class="m-ul">  
  13.                     <li class="m-li">子菜单11</li>  
  14.                     <li class="m-li">子菜单12</li>  
  15.                     <li class="m-li">子菜单13</li>  
  16.                 </ul>  
  17.             </div>  
  18.             <div class="m-one">  
  19.                 <span class="m-tit">主菜单02</span>  
  20.                 <ul class="m-ul">  
  21.                     <li class="m-li">子菜单21</li>  
  22.                     <li class="m-li">子菜单22</li>  
  23.                     <li class="m-li">子菜单23</li>  
  24.                 </ul>  
  25.             </div>  
  26.             <div class="m-one">  
  27.                 <span class="m-tit">主菜单03</span>  
  28.                 <ul class="m-ul">  
  29.                     <li class="m-li">子菜单31</li>  
  30.                     <li class="m-li">子菜单32</li>  
  31.                     <li class="m-li">子菜单33</li>  
  32.                 </ul>  
  33.             </div>  
  34.             <div class="m-one">  
  35.                 <span class="m-tit">主菜单04</span>  
  36.                 <ul class="m-ul">  
  37.                     <li class="m-li">子菜单41</li>  
  38.                     <li class="m-li">子菜单42</li>  
  39.                     <li class="m-li">子菜单43</li>  
  40.                 </ul>  
  41.             </div>  
  42.             <div class="m-one">