JavaScript||Tab栏切换

先放最终效果图，让大家生动形象体会一下：

web下拉菜单

1.内容介绍

研究过网页Tab栏的同仁应该都见过这种效果，鼠标经过一些Tab栏的某内容，对应会出现一个下拉菜单，如果鼠标离开这个内容，对应的下拉菜单隐藏。
下面一起来看看吧~

2.HTML页面布局

页面布局相对简单，总的来说就是先用一个’div‘作为总容器，它的孩子是三个’li’标签，每个‘li’标签里面放具体内容：

<ul class="nav">
	<li >
		<a href="##">主食</a>
		<ul >
			<li><a href="##">稀粥</a></li>
			<li><a href="##">大米饭</a></li>
			<li><a href="##">五谷杂粮</a></li>
			<li><a href="##">桂林米粉</a></li>
		</ul>
	</li>
	<li>
		<a href="##">菜品</a>
		<ul >
			<li><a href="##">北京烤鸭</a></li>
			<li><a href="##">宫保鸡丁</a></li>
			<li><a href="##">麻辣豆腐</a></li>
			<li><a href="##">酸椒鱼头</a></li>
			<li><a href="##">五香扣肉</a></li>
		</ul>
	</li>
	<li>
		<a href="##">饮品</a>
		<ul >
			<li><a href="##">冰镇酸梅汤</a></li>
			<li><a href="##">柠檬水</a></li>
			<li><a href="##">鲜榨豆浆</a></li>
			<li><a href="##">珍珠奶茶</a></li>
		</ul>
	</li>
</ul>

3.CSS样式设计

这个没什么好说的，怎么好看怎么来就行。
顺便提提我在这一步遇到的bug:
1)’a’标签设置长和宽失败
一开始是直接给a标签加长和宽，然后浏览器打开查看效果时，发现失效了，后面百度才知道’a’是行级元素，它们的长和宽是自适应的，不能直接修改。想要修改其长宽大小，需先将其变成块级元素（display: inline-block;）。
2）‘auto’巧妙使用：
我一开始将每个li的大小固定化了（设置了固定宽），然后在后面加入JS代码测试时，发现存在bug,只要经过‘li’的访问，下拉列表自动出现，与我的预计不符，后面将宽度改为auto，便消除了这个bug.
3)孩子和子孙
这个其实就是’>‘的使用了。
如果父亲和孩子之间没有‘>’（例如：A b)，则表示，选择的是以A标签为祖先的所有b标签。
如果父亲和孩子之间有‘>’（例如：A>b)，则表示，选择的是以A标签为父亲的直接孩子中的b标签。
下面是最终样式代码：

<style type="text/css">
	*{
		padding: 0;
		margin: 0;
	}
	li{
		list-style: none;
	}
	a{
		/*先转为行内块元素才能设置属性*/
		display: inline-block;
		width: 100%;
		height: 30px;
		/*font-weight: bold;*/
		text-decoration: none;
	}
	.nav{
		position: relative;
		top: 10px;
		margin: 0 auto;
		width: 300px;
		height: 30px;
		border: 1px solid gray;
	}
	.nav>li{
		margin: 0 auto;
		float: left;
		width: 100px;
		height: auto;
		text-align: center;
	}
	.nav>li>a{
		color: #D81E06;
		font-weight: 500;
		font-size: 18px;
	}
	.nav>li>a:hover{
		background: #D81E06;
		color: white;
		
	}
	.nav>li>ul{
		width: 90%;
		height: auto;
		color: black;
		box-shadow:2px 2px 6px #808080;
		display: none;
	}
	.nav>li>ul>li>a{
		
		height: 30px;
		color: grey;
		border-bottom: 1px solid salmon;
	}
	.nav>li>ul>li>a:hover{
		background: salmon;
		color: white;
	}
</style>

Js逻辑实现

主要思想：运用父子节点间的层级关系实现

var nav = document.querySelector('ul');
var idss = nav.childNodes;
for(var i = 0; i < idss.length; i++){
	idss[i].onmouseover = function(){
		this.childNodes[3].style.display = "block";
	}
	idss[i].onmouseleave = function(){
		this.childNodes[3].style.display = "none";
	}
}