使用js实现安居客二级菜单及（注意事项和问题点演示）完整版

安居客二级菜单css内容部分：

.anju{
				width:100%;
			}
			ul{
				width:1620px;
				height:50px;
				background-color:rgba(10,220,17,0.8);
				border:1px solid #eee;
				margin:300px auto;
			}
			li{
				float: left;
				line-height:50px;
				list-style: none;
				height:50px;
				text-align: center;
				margin-left:40px;
			}
			li:nth-of-type(1),li:nth-of-type(2),li:nth-of-type(4),li:nth-of-type(7),li:nth-of-type(8){
				width:90px;
			}
			li:nth-of-type(3){
				width:110px;
			}
			li:nth-of-type(5){
				width:160px;
			}
			li:nth-of-type(6){
				width:140px;
			}
			a{
				text-decoration: none;
				color:#fff;
			}
			*{
				padding:0px;
				margin:0px;
			}
			li:nth-of-type(1){
					background-color:rgba(0,0,0,0.2);
			}
			li:hover{
				background-color:rgba(0,0,0,0.2);
			}
			.box{
				width:100px;
				text-align: center;
				background-color:#ccc;
				margin:0px auto;
				display:none;
			}
			.box p{
				line-height:37px;
			}

安居客二级菜单HTML内容部分：

<div class="anju">
			
			<ul>
			 <li><a href="javascript:;">首页</a>
			 
			 </li>
			 
			  <li class="bot"><a href="javascript:;">新房</a>
			  <div class="box">
			    <p>新盘</p>
				<p>楼讯</p>
				<p>热门活动</p>
				<p>看房团</p>
				<p>房源</p>
				<p>商业地产</p>
				<p>海外地产</p>
				<p>品牌产区</p>
				</div>
			  </li>
			  
			  <li class="bot"><a href="javascript:;">二手房</a>
			    <div class="box">
				 <p>房源</p>
				  <p>小区</p>
				  <p>地图找房</p>
				  <p>主题找房</p>
				  <p>找经纪人</p>
				  <p>优秀经纪人榜</p>
				  <p>违规经纪人</p>
				  <p>我要卖房</p>
				</div>
			  </li>
			  
			  <li class="bot"><a href="javascript:;">租房</a>
			  <div class="box">
			   <p>房源</p>
			    <p>小区</p>
			    <p>地图找房</p>
			    <p>主题找房</p>
			    <p>找经纪人</p>
			    <p>优秀经纪人榜</p>
			    <p>违规经纪人</p>
			    <p>我要卖房</p>
			  </div>
			  </li>
			  
			  <li class="bot"><a href="javascript:;">商铺写字楼</a>
			  <div class="box">
			   <p>房源</p>
			    <p>小区</p>
			    <p>地图找房</p>
			    <p>主题找房</p>
			    <p>找经纪人</p>
			    <p>优秀经纪人榜</p>
			    <p>违规经纪人</p>
			    <p>我要卖房</p>
			  </div>
			  </li>
			  
			  <li class="bot"><a href="javascript:;">海外地产</a>
			  <div class="box">
			   <p>房源</p>
			    <p>小区</p>
			    <p>地图找房</p>
			    <p>主题找房</p>
			    <p>找经纪人</p>
			    <p>优秀经纪人榜</p>
			    <p>违规经纪人</p>
			    <p>我要卖房</p>
			  </div>
			  </li>
			  
			  <li class="bot"><a href="javascript:;">装修</a>
			  <div class="box">
			   <p>房源</p>
			    <p>小区</p>
			    <p>地图找房</p>
			    <p>主题找房</p>
			    <p>找经纪人</p>
			    <p>优秀经纪人榜</p>
			    <p>违规经纪人</p>
			    <p>我要卖房</p>
			  </div>
			  </li>
			  
			   <li class="bot">
				  <a href="javascript:;">楼讯</a>
			   <div class="box">
			    <p>房源</p>
			     <p>小区</p>
			     <p>地图找房</p>
			     <p>主题找房</p>
			     <p>找经纪人</p>
			     <p>优秀经纪人榜</p>
			     <p>违规经纪人</p>
			     <p>我要卖房</p>
			   </div>
			   </li>
			</ul>
		</div>

安居客二级菜单js内容部分：

 var bot=document.querySelectorAll('.bot');
            var box=document.querySelectorAll('.box');
            for(var i=0;i<bot.length;i++){
                bot[i].addEventListener("mouseover",function(){
                    //这里必须使用this才可以，若使用box下面的下拉栏选择器（元素），那么会发生偏移
                    //可以打印其结果得console.log(bot[i-3]);   注：结果下面有演示；
                    this.children[1].style.display="block"
                    
                })
                bot[i].addEventListener('mouseout',function(){
                    this.children[1].style.display='none';
                })
            }

安居客二级菜单问题点及最终成果：