jQuery implémente un simple menu déroulant secondaire_jquery

code html

<div class="UpLayer">
<dl>
<dt>
<a href="javascript：void(0)">脚本之家</a></dt>
<dd>
<a href="http://www.demo.com/js/">特效</a> <a href="http://www.demo.com/Tutorials/">教程</a> <a href="http://www.demo.com/zy/">资源</a> <a href="http://www.demo.com/mb/">模板</a> <a href="http://www.demo.com/news/">资讯</a></dd>
</dl>
</div>

code js

<script type="text/javascript"> 
// 【经典】弹出层菜单 
$(document).ready(function(){ 
  var objStr = ".UpLayer"; 
  $(objStr).each(function(i){ 
    $(this).click(function(){ 
      $($(objStr+" dd")[i]).show(); 
      $($(objStr+" dt")[i]).addClass("UpLayer02"); 
    }); 
    $(this).hover(function(){},function(){ 
      $($(objStr+" dd")[i]).hide(); 
      $($(objStr+" dt")[i]).removeClass("UpLayer02"); 
    });  
  }); 
}); 
</script> 

code css

body,h1,h2,h3,h4,h5,h6,p,ol,ul,li,dl,dt,dd{padding:0;margin:0;} 
li{list-style:none;} 
img{border:none;} 
u{text-decoration:none;} 
em{font-style:normal;} 
a{color:#424242;text-decoration:none;outline:none;blr:expression(this.onFocus=this.blur());} 
body{font-size:12px;font-family: Arial,Verdana, Helvetica, sans-serif; word-break:break-all;} 
.box{margin:0 auto;text-align:left;width:920px;} 
.clear{clear:both;} 
/* 【经典】弹出层菜单 */ 
.UpLayer{ margin:100px;} 
.UpLayer dl dt{width:50px;position:absolute; z-index:3;padding:0 5px;line-height:20px;} 
.UpLayer02{border:#ccc 1px solid; border-bottom:none;background:#f1f1f1; margin:-1px 0 0 -1px;} 
.UpLayer dl dd{ width:80px;position:absolute;z-index:2;border:#ccc 1px solid;padding:5px; line-height:20px; background:#f1f1f1; display:none; margin:19px 0 0 -1px;} 
.UpLayer dl dd a{ display:block;border-bottom:#ccc 1px dashed;} 

Il vaut mieux ne pas oublier d'insérer le fichier jQuery js, il est préférable de télécharger le dernier.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.