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

最后是代码运行效果

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

html左侧导航栏点击下拉菜单,HTML+CSS实现下拉菜单
HTML+CSS实现简单下拉菜单 HTML+CSS实现简单的下拉列表 1.下拉列表实例代码如下: *{ margin:0; padding:0; text-decoration:none; list ...
还原淘宝首页最顶部的导航栏（含下拉菜单，图标等）
还原了淘宝首页最顶部的导航栏,包括了各个导航的下拉列表等(位置对齐稍微有些偏差,毕竟没有原版设计图),用到了jquery,js,CSS3等知识.没有花时间去做录屏GIF,就几张效果图看下:如下原始导 ...
ui li 菜单点击添加下级_如何制作导航栏中的下拉菜单
1.写入一级菜单 <ul class="nav clearfix"><li class="nav-li fl"><a href=' ...
用HTML里面的表格制作可以下拉的导航栏,excel表格中下拉菜单制作有什么方法
excel下拉菜单的制作也是经常使用的一个操作,通常就是利用数据有效性建立分类下拉列表实现.以下是学习啦小编为您带来的关于excel下拉菜单制作方法介绍,希望对您有所帮助. excel下拉菜单制作方法 ...
HTML下拉菜单怎么做成横向,css导航条横向带下拉菜单
css+div导航下拉二级菜单竖排效果如何改为横排? ,在"下一站"有三个二级竖排菜单,如何能变为横排?困扰了我一天了,让二级菜单变成一行,只需要在竖排的效果上,让二级菜单都浮动起 ...
动态二级下拉菜单html,js实现简洁大方的二级下拉菜单效果代码
本文实例讲述了js实现简洁大方的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款简洁大方的二级下拉菜单,菜单的颜色自己根据需要重新定义吧,这里仅给大家提供一种制作二级菜单的思路,整体效 ...
html中表格怎么实现下拉,wps表格中的二级下拉菜单怎么做
excel二级联动下拉菜单怎么做 Excel怎么制作二级,三级甚至无限级下拉菜单以WPS 2019版本为例: 关于Excel怎么制作二级,三级甚至无限级下拉菜单,在WPS「表格(Excel)」中操作 ...
Bootstrap导航条鼠标悬停下拉菜单
Bootstrap导航条鼠标悬停下拉菜单 Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态,都是点击弹出下拉菜单,为了适应一般网站使用,我稍作了一些修改,鼠标hover时就弹 ...
CSS3蓝色宽屏二级下拉菜单DEMO演示
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...

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

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

最新文章

热门文章