JS drop-down menu

web front end eighteen thousand five hundred and six 14 years ago (2011-03-25)

The Method of Realizing Two level Menu by Javascript The codes are as follows:

 <html> <head>     <meta charset="UTF-8"> <title>Navigation bar submenu- Tuoyuan Network (TOYEAN.COM)</title> <style> *, body { margin:0;  padding:0;  } body { font-size:14px;  font-family:microsoft yahei;  } ul,li { list-style:none;  } a { text-decoration:none;  } .wrap { width:1000px;  margin:0 auto;  } .header { width:100%;  border-bottom:1px solid #eee;  } .logo { float:left;  font-size:22px;  line-height:50px;  } .menu { float:right;  } .menu li { line-height:50px;  display:inline-block;  vertical-align:top;  position:relative;  } .menu li a { padding:0 20px; font-size:18px;  color:#333;  } .menu li a:hover { color:#f60;  } .menu li a.sub:after { content:"∨";  margin:0 0 0 5px; } .menu li dl { min-width:120px;  padding:10px 20px; border:1px solid #ccc;  background:#fff;  position:absolute;  top:51px;  left:0;  display:none;  } .menu dl dd { line-height:30px;  } .menu dl a { padding:0;  font-size:14px;  border-bottom:1px solid #eee;  display:block;  } .menu dl a.nb { border:0;  } .menu dl:before { content:"";  height:10px;  width:10px;  background:#fff;  border:1px solid #ccc;  -webkit-transform:rotate(-45deg);  -moz-transform:rotate(-45deg);  -ms-transform:rotate(-45deg);  -o-transform:rotate(-45deg);  transform:rotate(-45deg);  border-left:0;  border-bottom:0;  position:absolute;  top:-6px;  left:28px;  } .clear { clear:both;  } </style> <script src=" https://code.jquery.com/jquery-1.8.3.min.js "></script> <script> $(function(){     $(".menu li").each(function(){         if($(this).children("dl").length>0){             $(this).children("a").addClass("sub");         }     });     $(".sub").parent().hover(function(){         $(this).children("dl").toggle();     });     $(".menu dl dd:last-child a").addClass("nb"); }); </script> </head> <body> <div class="header"> <div class="wrap"> <div class="logo">Navigation submenu test</div>     <div class="menu"> <ul> <li><a href="">Home Page</a></li> <li><a href="">About us</a></li>     <li>         <a href=""> Journalism List</a>         <dl> <dd><a href="">Industry News</a></dd> <dd><a href="">Political News</a></dd> <dd><a href="">International News</a></dd>         </dl>     </li>     <li> <a href="">Product Center</a>         <dl> <dd><a href="">Product 01</a></dd> <dd><a href="">Product 02</a></dd> <dd><a href="">Product 03</a></dd> <dd><a href="">Product 04</a></dd> <dd><a href="">Product 05</a></dd>         </dl>     </li> <li><a href="">Contact us</a></li> </ul>     </div> </div> <div class="clear"></div> </div> </body> </html>