用jquery制作一个二级导航下拉菜单

       

　　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();

  })

})