jquery implementation simple Two-level pull-down menu

HTML code

1 2 3 4 5 6 7 8

<div class= "Uplayer" > <dl> <dt> <a href= "javascript:void (0)" > Script Home </a></dt> < dd> <a href= "http://www.demo.com/js/" > Effects </a> <a href= "http://www.demo.com/Tutorials/" > Tutorials </ a> <a href= "http://www.demo.com/zy/" > Resources </a> <a href= "http://www.demo.com/mb/" > Template </a> <a href= "http://www.demo.com/news/" > Information </a></dd> </dl> </div>

JS Code

1 2 3 4 5 6 7 8 9 10 11 12 13 14-15 16

<script type= "Text/javascript" >//"Classic" Pop-up layer menu $ (document). Ready (function () {var objstr = ". Uplayer "; $ (OBJSTR). Each (function (i) {$ (a). 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>

CSS Code

1 2 3 4 5 6 7 8 9/

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}/* "Classic" pop-up menu * *. 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;}

It is best not to forget to insert jquery js files, preferably download the latest.