使用jQuery完成下拉菜单

开发工具与关键技术：Adobe Dreamweaver CC 2017 jQuery
作者：孙水兵
撰写时间：2019年2月21

用jQuery实现下拉菜单是一件很简单的事，主要是进行css的编写，将要隐藏的菜单设置display：none；再用jQuery将其进行显示与隐藏。
首先：引入jQuery文件

<script src="jquery/jquery-3.2.1.min.js"></script>

HTML部分
用ul标签来包裹要显示与隐藏的内容，再到li标签中用ul标签包裹要隐藏的内容。再要隐藏的内容上面显示的内容附加一个相同的内，用来进行鼠标移入移出事件。要进行页面跳转的内容用a标签包裹。

<div id="menu">
  <ul>
     <li><a href="#">首页</a></li>
     <li class="navmenu"><a href="#">内容</a>
   	  <ul>  
   		 <li><a href="#">内容1</a></li>
   		 <li><a href="#">内容2</a></li>
   	  </ul>
     </li>
     <li class="navmenu"><a href="#">标题</a>
   	  <ul>
   		 <li><a href="#">标题1</a></li>
   		 <li><a href="#">标题2</a></li>
   		 <li><a href="#">标题3</a></li>
   	  </ul>
     </li> 
   </ul>
</div> 

CSS部分
设置菜单的背景颜色，宽度高度，让其水平居中。去除ul标签的固定样式设置要显示内容的样式，主要是让ul li ul中的内容为display：none；。

*{ 
   margin:0px;
   padding:0px;
   }
#menu{ 
    background-color:#eee;
    width:300px;
    height:40px;
    margin:0 auto;
   }
ul{
    list-style:none;
   }
ul li{
    float:left;  
    line-height:40px; 
    text-align:center;
    position:relative;
   }
a{ 
    text-decoration:none;
    color:#000;
    display:block;
    width:90px;
   }
a:hover{ 
    color:#FFF; 
    background-color:#666;
   }
ul li ul li{
    float:none; 
    border-left:none;
    margin-top:2px;
    background-color:#eee;
   } 
ul li ul{  
    width:90px; 
    position:absolute; 
    left:0px; 
    top:40px; 
    display:none;
   }

jQuery部分
根据类选择鼠标移入要显示移出隐藏的类，给其添加鼠标移入，鼠标移出事件，然后选择这元素的子元素的ul标签设置显示与隐藏事件。

 $(function(){
    $(".navmenu").mouseover(function(){
   		 $(this).children("ul").show(); 
   		 })
    $(".navmenu").mouseout(function(){ 
   		 $(this).children("ul").hide(); 
   		 }) 
     })