仿安居客首页导航栏及二级下拉菜单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>

最后是代码运行效果