这个导航下拉菜单需要实现的功能是：下拉菜单的宽度与浏览器视口的宽度一样宽；一级导航只有两项，当鼠标移到一级导航上的导航项时，相应的二级导航出现。在本案例中通过改变二级导航的高度来实现二级导航的显示和消失。为了便于理解我画了一个图，如下：
在这个案例主要用到的知识有：设置定时器，清除定时器，mouseout和mouseover事件，另外还有css中position相关知识。本案例分为两部分讲解。第一部分html和css，第二部分js。
一. html和css
将导航这个导航条包裹在一个div中，这个div的position值为relative，高度为50px（导航条的高度为50px），宽度为100%，将最外层的div的position属性设置为relative是因为二级导航要根据这个div来定位。这个导航条的结构是二级嵌套无序列表。每一个一级导航项li都嵌套了它对应的无序列表。需要将嵌套的无序列表移除文档流。所以嵌套的无序列表的position值为absolute，top：50px（导航条的高度）。left：0；right：0；通过设置这些值可以使嵌套的无序列表宽度为浏览器视口的宽度。通过将li的display值设置inline-block并且将外层div的text-align设置为center使得导航项居中显示。
注：在这个案例中一定要将嵌套的无序列表的position的值设置为absolute，使它移除文档流。
html和css代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <link type="text/css" href="https://www.jb51.net/index.css" > </head> <body> <div> <ul> <li><a href='#'>产品<span></span></a> <ul> <li> <a href='#'> <img src='https://www.jb51.net/img/01fea55541ed73000001714a430253.jpg'> <strong>纳斯</strong> </a> </li> <li> <a href='#'> <img src='https://www.jb51.net/img/thumb_image3.jpg'> <strong>纯色</strong> </a> </li> <li> <a href='#'> <img src='https://www.jb51.net/img/白胡子.jpg'> <strong>保温杯</strong> </a> </li> <li> <a href='#'> <img src='https://www.jb51.net/img/宠物.jpg'> <strong>设计周边</strong> </a> </li> </ul> </li> <li><a href='#'>服务<span></span></a> <ul id = 'inter2'> <li> <a href='#'> <img src='https://www.jb51.net/img/狮子座.jpg'> <strong>售后服务</strong> </a> </li> <li> <a href='#'> <img src='https://www.jb51.net/img/莲花禅.jpg'> <strong>设计师</strong> </a> </li> </ul> </li> </ul> </div> <script type="text/javascript" src='https://www.jb51.net/index.js'></script> </body> </html>
css代码如下：
*{ padding: 0; margin: 0; } .header{ position: relative; width: 100%; height: 50px; background-color: #000000; text-align: center; z-index: 2; } .header .outer li{ display: inline-block; list-style: none; } .outerList{ height: 50px; line-height: 50px; } .outerList a{ display: block; padding: 0 15px; color: #fff; text-decoration: none; } .outerList:hover a{ color: #EDECEC; } .outerList .link span{ display: block; height: 0; width: 100%; position: relative; top: -10px; left: 0; background-color: #fff; } .outerList:hover .link span{ height: 1px; } .outerList .inter{ position: absolute; left: 0; height: 0; overflow: hidden; top: 50px; right: 0; background-color:rgba(0,0,0,0.5); } .outerList .inter li{ margin-top: 30px; } .outerList .inter strong{ display:block; height: 25px; line-height: 25px; text-align: center; }
二. js部分
在js部分涉及到的知识主要有：设置定时器，清除定时器，mouseout和mouseover事件。
mouseout事件当鼠标从一个元素上移入另一个元素的上时，会在失去鼠标的那个元素上触发mouseout事件。获得鼠标的那个元素可能是失去鼠标的元素的父元素或子元素，获得鼠标的那个元素也可能位于失去鼠标元素的外部。当在一级导航项上触发mouseout事件时，我们需要判断获得鼠标的元素是不是一级导航项的子孙元素。当一个元素触发了mouseout事件时，去鼠标的元素为目标元素（target），获得鼠标的元素为相关元素（relatedTarget）。所以需要判断相关元素是否为一级导航项的子孙元素，如果是子孙元素，则相应的导航项的二级导航项高度不变。如果不是子孙元素，则相应的二级导航项消失。判断是否为子孙元素的代码如下：