1使用$(function(){...})获取到想要作用的HTML元素。

       2通过使用children()方法寻找子元素。
       3通过使用show()方法来显示HTML元素。
       4通过使用hide()方法来隐藏HTML元素。
       5jQuery库引用方法：将jQuery库下载到电脑上，然后引用。

 <script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>

body部分

<div id="nav" class="nav">
  <ul>
    <li><a href="#">一级导航</a></li>
   <li class="navmenu"><a href="#">一级导航</a>
    <ul>
     <li><a href="#">二级导航</a></li>
     <li><a href="#">二级导航</a></li>
     <li><a href="#">二级导航</a></li>
    </ul>
   </li>
   <li class="navmenu"><a href="#">一级导航</a>
    <ul>
     <li><a href="#">二级导航</a></li>
     <li><a href="#">二级导航</a></li>
     <li><a href="#">二级导航</a></li>
    </ul>
   </li>
   <li><a href="#">一级导航</a></li>
   <li><a href="#">一级导航</a></li>
  </ul>
</div>
css部分
*{
 margin:0;
 padding:0;
}
.nav{
 background-color:#EEEEEE;
 height:40px;
 width:450px;
 margin:0 auto;
}
ul{
 list-style:none;
}
ul li{
 float:left;
 line-height:40px;
 text-align:center;
}
a{
 text-decoration:none;
 color:#000000;
 display:block;
 width:90px;
 height:40px;
}
a:hover{
 background-color:#666666;
 color:#FFFFFF;
}
ul li ul li{
 float:none;
 background-color:#EEEEEE;
}
ul li ul{
 display:none;
}
ul li ul li a:hover{
 background-color:#009933;
}
/*:hover 选择器用于选择鼠标指针浮动在上面的元素。*/
js部分
$(function(){
  $(".navmenu").mouseover(function(){
   $(this).children("ul").show(); 
  })
   
  $(".navmenu").mouseout(function(){
   $(this).children("ul").hide();
  })
})