JQuery implements simple level-2 drop-down menu and jquery drop-down menu

JQuery implements simple level-2 drop-down menu and jquery drop-down menu

Html code

<Div class = "UpLayer"> <dl> <dt> <a href = "javascript: void (0) "> helper house </a> </dt> <dd> <a href =" http://www.demo.com/js/ "> special effects </a> <a href =" http://www.demo.com/Tutorials/ "> tutorial </> <a href = "http://www.demo.com/zy/"> resources </a> <a href = "http://www.demo.com/mb/"> templates </a> <a href = "http://www.demo.com/news/"> Information </a> </dd> </dl> </div>

Js Code

<Script type = "text/javascript"> // [classic] pop-up 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

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.

The above is all the content of this article. I hope you will like it.