JQuery implements a simple level-2 drop-down menu

JQuery implements a simple level-2 drop-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/"> tutorial </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 ){ $ (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>

Css code

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

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 the jQuery js file, but to download the latest one.