javascript小案例-----下拉菜单

代码思路:

        导航栏里的里都要有鼠标经过效果,所以要循环注册鼠标事件

        当鼠标经过li里面的第二个孩子ul显示时,当鼠标离开,则ul隐藏

        

效果如下:

HTML代码:

创建一个下拉菜单的框架

<ul class="nav">
			<li>
				<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>
				<ul>
					<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>
				</ul>
			</li>
		</ul>

css代码:

设置下拉菜单的一些固定样式样式,比如把父亲的孩子隐藏,比如子绝父相

			* {
				margin: 0;
				padding: 0;
			}

			ul {
				list-style: none;
			}

			a {
				text-decoration: none;
				color: #222222;
			}

			.nav {
				width: 400px;
				height: 200px;
				margin: 40px auto;
			}

			.nav li {
				position: relative;
				float: left;
				width: 60px;
				height: 30px;
				line-height: 30px;
				text-align: center;
			}

			.nav ul li a {
				display: block;
				text-align: center;
				width: 60px;
				height: 30px;
				color: #f0f;
			}

			.nav>li>a:hover {
				background-color: #eee;
			}

			.nav ul {
				display: none;
				position: absolute;
				top: 31px;
				left: 0;
				width: 100%;
				border-left: 1px solid #fecc5b;
				border-right: 1px solid #fecc5b;
			}

			.nav ul li {
				border-bottom: 1px solid #fecc5b;
			}

			.nav ul li a:hover {
				background-color: #fff5da;
			}

javascript部分代码:

		//获取元素
		var nav = document.querySelector(".nav");
		var lis = nav.children; //得到3个亲儿子li
		
		for(var i=0;i<lis.length;i++){
			lis[i].onmouseover=function(){
				// lis的孩子ul
				this.children[1].style.display='block'
			}
			lis[i].onmouseout=function(){
				// lis的孩子ul
				this.children[1].style.display='none'
			}
		}