仿安居客首页导航栏及二级下拉菜单Html+Css+JavaScript

这次仿写的是安居客的首页导航栏，要求实现二级下拉菜单

首先，这是原网页的效果

接下来是html部分

<div class="box1"><ul id="nav"><li><a href="" style="background-color: #528e01;">首页</a></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><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><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><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><li><a href="">优秀经纪人榜</a></li><li><a href="">违规经纪人</a></li><li><a href="">我要卖房</a></li></ul></li><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><li><a href="">问答</a></li></ul> </div>

css部分

* {margin: 0;padding: 0;}.box1{width: 100%;height: 48px;background-color:#62ab00;}#nav {list-style-type: none;margin:0px 100px;}#nav>li {float: left;padding: 0;margin: 0;position: relative;}#nav>li>a {display: block;width: 90px;color: #ffffff;line-height: 48px;padding: 0px 10px;text-decoration: none;text-align: center;}#nav>li>a:hover {background-color: #528e01;}#nav ul {display: none;position: absolute;left: 0;top: 48px;list-style-type: none;width: 100%;}#nav ul li {padding: 0;margin: 0;}#nav ul li a {border: 1px solid #e0e0e0;width: 90px;height: 16px;color: #666;display: block;text-decoration: none;padding: 15px;background-color: #F9F9F9;border-top: none;text-align: left;}#nav ul li a:hover{color: #528e01;}</style>

JavaScript部分

<script>var nav = document.getElementById('nav'); var lis = nav.children;for (var i = 0; i < lis.length; i++) {lis[i].onmouseover = function () {this.children[1].style.display = 'block';}lis[i].onmouseout = function () {this.children[1].style.display = 'none';}}</script>

最后是代码运行效果