jQuery show hide Method two menu

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>submenu</title>
  9     <style>
 10         * {
 11             margin: 0;
 12             padding: 0;
 13         }
 14         
 15         ul {
 16             list-style: none;
 17         }
 18         
 19         li ul {
 20             display: none;
 21         }
 22         
 23         a {
 24             display: block;
 25             width: 120px;
 26             height: 30px;
 27             line-height: 30px;
 28             text-align: center;
 29             text-decoration: none;
 30             color: black;
 31             background-color: orange;
 32             overflow: hidden;
 33         }
 34         
 35         a:hover {
 36             background-color: aliceblue;
 37         }
 38     </style>
 39     <script src="js/jquery-1.11.3.min.js"></script>
 40     <script>
 41         $(function() {
 42             $("ul>li").hover(function() {
 43                 // over
 44                 $(this).children("ul").show();
 45 
 46             }, function() {
 47                 // out
 48                 $(this).children("ul").hide();
 49             });
 50         })
 51     </script>
 52 </head>
 53 
 54 <body>
 55     <ul>
 56         <li>
 57             <a href="javascript:void(0);">A menu. 1 </ A > 
58              < UL > 
59                  < Li > 
60                      < A the href = "JavaScript: void (0);" > two menu. 1 </ A > 
61 is                  </ Li > 
62 is                  < Li > 
63 is                      < A the href = "JavaScript: void (0);" > two menu. 1 </ A > 
64                  </ Li > 
65                  < Li > 
66                      <a href="javascript:void(0);"> Secondary menu. 1 </ A > 
67                  </ Li > 
68              </ UL > 
69          </ Li > 
70          < Li > 
71 is              < A the href = "JavaScript: void (0);" > a menu 2 </ A > 
72              < UL > 
73 is                  < Li > 
74                      < A the href = "JavaScript: void (0);" > two menu 2 </ A > 
75                  </ Li > 
76                 <li>
 77                     <a href="javascript:void(0);">二级菜单2</a>
 78                 </li>
 79                 <li>
 80                     <a href="javascript:void(0);">二级菜单2</a>
 81                 </li>
 82             </ul>
 83         </li>
 84         <li>
 85             <a href="javascript:void(0);">A menu. 3 </ A > 
86              < UL > 
87                  < Li > 
88                      < A the href = "JavaScript: void (0);" > two menu. 3 </ A > 
89                  </ Li > 
90                  < Li > 
91 is                      < A the href = "JavaScript: void (0);" > two menu. 3 </ A > 
92                  </ Li > 
93                  < Li > 
94                      <a href="javascript:void(0);">二级菜单3</a>
 95                 </li>
 96             </ul>
 97         </li>
 98     </ul>
 99 </body>
100 
101 </html>
jQuery show hide Method two menu

Guess you like
