Jquery css div pop-up level-2 menu code. This is a level-2 menu instance Code implemented by jquery + css. You only need to download a jquery. js file, you can easily use this beautiful jquery second-level menu code.
Jquery css tutorial div pop-up level-2 menu code
This is a second-level menu instance Code implemented by jquery + css. You only need to download a jquery. webpage special effect files, you can easily use this beautiful jquery second-level menu code.
<Html>
<Head>
<Meta http-equiv = "content-type" content = "text/html; charset = UTF-8"/>
<Script src = "jquery. webpage effects"> </script>
<Style type = "text/css">
<! --
* {Margin: 0; padding: 0; border: 0 ;}
Body {font-family: arial,, serif; font-size: 12px ;}
# Nav {width: 180px; line-height: 24px; list-style-type: none; text-align: left ;}
# Nav span {width: 160px; display: block; padding-left: 20px; cursor: pointer ;}
# Nav li {background: # ccc; border-bottom: # fff 1px solid; float: left ;}
# Nav a: link, # nav a: visited {color: #666; text-decoration: none ;}
# Nav a: hover {color: # fff; text-decoration: none; font-weight: bold ;}
# Nav li dl {list-style: none; text-align: left; border-top: 1px solid # fff ;}
# Nav li dl dd {background: # ebebeb; border-bottom: # fff 1px solid ;}
# Nav li dl a {padding-left: 20px; width: 160px; display: block ;}
# Parent {width: 300px; padding-left: 20px ;}
. Dis {display: none ;}
. Ondis {display: block ;}
. Onhover {background: #009900; color: # fff ;}
. Linkhover {background: # cc0000; color: # fff ;}
. Active {background: #00 ccff; color: #666666 ;}
-->
</Style>
<Script type = "text/Webpage effects">
<! --
$ (Function (){
$ ("# Nav li"). each (function (I) {$ (this). children ("dl"). addclass ("dis ");
$ (This ). children (). click (function () {$ (this ). next (). toggle (function () {$ (this ). addclass ("ondis ");});});
$ (This ). click (function () {$ ('# nav li '). each (function () {$ (this ). find ("span "). removeclass () ;}); $ (this ). find ('span '). addclass ("onhover ");});
});
})
$ (Function () {$ ("# nav dl dd "). hover (function () {$ (this ). children (). addclass ("linkhover")}, function () {$ (this ). children (). removeclass ("linkhover ")});})
-->
</Script>
<Title> jquery pop-up Level 2 menu </title>
</Head>
<Body>
<Div id = "parent">
<Ul id = "nav">
<Li> <span> frist nav1 </span>
<Dl>
<Dd> <a href = "http://down.bKjia. c0m"> subnav1 menu1 </a> </dd>
<Dd> <a href = "#"> subnav1 menu2 </a> </dd>
<Dd> <a href = "#"> subnav1 menu3 </a> </dd>
<Dd> <a href = "#"> subnav1 menu4 </a> </dd>
</Dl>
</Li>
<Li> <span> frist nav2 </span>
<Dl>
<Dd> <a href = "http://www.bKjia. c0m"> subnav2 menu1 </a> </dd>
<Dd> <a href = "#"> subnav2 menu2 </a> </dd>
<Dd> <a href = "#"> subnav2 menu3 </a> </dd>
<Dd> <a href = "#"> subnav2 menu4 </a> </dd>
</Dl>
</Li>
<Li> <span> frist nav3 </span>
<Dl>
<Dd> <a href = "#"> subnav3 menu1 </a> </dd>
<Dd> <a href = "#"> subnav3 menu2 </a> </dd>
<Dd> <a href = "#"> subnav3 menu3 </a> </dd>
<Dd> <a href = "#"> subnav3 menu4 </a> </dd>
</Dl>
</Li>
<Li> <span> frist nav4 </span>
<Dl>
<Dd> <a href = "http://mb.bKjia. c0m"> subnav4 menu1 </a> </dd>
<Dd> <a href = "#"> subnav4 menu2 </a> </dd>
<Dd> <a href = "#"> subnav4 menu3 </a> </dd>
<Dd> <a href = "#"> subnav4 menu4 </a> </dd>
</Dl>
</Li>
</Ul>
</Div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
