jQuery show hide方法 二级菜单

 <!DOCTYPE html>
 <html lang="en">

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>submenu</title>
     <style>
         * {
             margin: 0;
             padding: 0;
         }

         ul {
             list-style: none;
         }

         li ul {
             display: none;
         }

         a {
             display: block;
             width: 120px;
             height: 30px;
             line-height: 30px;
             text-align: center;
             text-decoration: none;
             color: black;
             background-color: orange;
             overflow: hidden;
         }

         a:hover {
             background-color: aliceblue;
         }
     </style>
     <script src="js/jquery-1.11.3.min.js"></script>
     <script>
         $(function() {
             $("ul>li").hover(function() {
                 // over
                 $(this).children("ul").show();

             }, function() {
                 // out
                 $(this).children("ul").hide();
             });
         })
     </script>
 </head>

 <body>
     <ul>
         <li>
             <a href="javascript:void(0);">一级菜单1</a>
             <ul>
                 <li>
                     <a href="javascript:void(0);">二级菜单1</a>
                 </li>
                 <li>
                     <a href="javascript:void(0);">二级菜单1</a>
                 </li>
                 <li>
                     <a href="javascript:void(0);">二级菜单1</a>
                 </li>
             </ul>
         </li>
         <li>
             <a href="javascript:void(0);">一级菜单2</a>
             <ul>
                 <li>
                     <a href="javascript:void(0);">二级菜单2</a>
                 </li>
                 <li>
                     <a href="javascript:void(0);">二级菜单2</a>
                 </li>
                 <li>
                     <a href="javascript:void(0);">二级菜单2</a>
                 </li>
             </ul>
         </li>
         <li>
             <a href="javascript:void(0);">一级菜单3</a>
             <ul>
                 <li>
                     <a href="javascript:void(0);">二级菜单3</a>
                 </li>
                 <li>
                     <a href="javascript:void(0);">二级菜单3</a>
                 </li>
                 <li>
                     <a href="javascript:void(0);">二级菜单3</a>
                 </li>
             </ul>
         </li>
     </ul>
 </body>

 </html>