导航是一个网站的开始，导航下面经常会有二级菜单和三级菜单，鼠标经过主导航，菜单就需要显示出来，鼠标移开，相应的导航也需要隐藏，这是这个导航伸缩显示的原理。实现这样的功能，七娃总结了一下，目前接触到的有3中类型：包含关系导航，相邻关系导航，以及今天要说的非相邻关系导航！

对于前两种：可以用css和js都能实现

1.包含/相邻关系导航 

<ul>
<h3>案例</h3>
<li>
	<a href=""><b>Cases1</b></a>
        <a href=""><b>Cases2</b></a>
        <a href=""><b>Cases3</b></a>
</li>
</ul>

针对这样的，我们只需用css将li的元素隐藏起来，h3经过的时候显示即可，连js都不需要用，如下：

ul li{dispaly:none;}
ul h3:hover li{display:block;}

或者用js实现，如下： 

$("ul h3").hover(function(){
$("ul li").show();
},function(){
$("ul li").hide();
})

2.这是我们今天要讲的，不相邻元素/盒子/div的导航怎么实现呢？

七娃最开始想的是用js控制元素的隐藏和显示，和案例1一样，但是出现了bug：就是永远不能将鼠标移动到二级导航上，鼠标一旦移出一级菜单，二级菜单就隐藏了！这跟没有办法控制；然后七娃想通过二级菜单显示之后判断鼠标当前位置，是否在二级导航里面，如果是，那就不隐藏，如果不是就隐藏；不过这明显没有实现，因为利用监听元素控制鼠标一直判断位置不太友好，最后放弃改想法；

最终实现原理：js利用显示隐藏，加上计时器，然后再判断一次鼠标是否经过二级菜单；

就是说，在鼠标经过一级菜单时，二级菜单显示，鼠标移出一级菜单时触发了一个倒计时2秒的计时器，计时器回调函数进行二次判断，判断鼠标是否移入到了二级菜单里面，如果是，就不采取任何动作，否则将二级菜单隐藏；

代码如下： 

 $("一级导航元素").hover(function(){
		$("二级导航元素").show();
	},function(){
		setTimeout(function(){
		   if($('二级导航元素').mouseenter()){	 
                       $("二级导航元素").css({"display":"block"});
		   }else if($('二级导航元素').mouseleave()) {
		       $("二级导航元素").hide();}
		},2000);	
	})
$('二级导航元素').mouseleave(function(){
		$("二级导航元素").hide();
})

这样就实现了非相邻关系下的导航显示和隐藏！其中“一级导航元素”和“二级导航元素”分别对应菜单的class名字或者id即可