导读：今天来通过一个安居客web下拉菜单来总结一下怎么用css布局以及通过js切换css效果
首先看案例原图：
头部的布局以及下拉菜单布局
实现代码：
-
首页
-
新房
- 新盘
- 楼讯
- 热门活动
-
二手房
- 地图找房
- 房源
- 小区
-
租房
- 区域找房
- 地图找房
- 地铁找房
-
商铺写字楼
- 商铺出租
- 商铺出售
- 商铺新盘
-
海外地产
-
装修
-
楼讯
-
房产研究院
-
房价
css布局部分：
css这一块主要核心是通过盒子浮动，定位来布局，还有对选择器的熟练掌握。
js代码块实现鼠标移入目标事件，显示下拉菜单，失去鼠标焦点隐藏下拉菜单
主要重点在于逻辑的判断，通过for循环来遍历鼠标移入目标的具体项，主要防止效果重复不消失
然后就是DOM中对于父子节点的掌握，通过父节点找到子节点，实现下拉菜单的显示隐藏
这里需要注意得是这样通过父子节点找事件，会出现一个BUG，就是在鼠标移入没有第二个子节点的项时会报错，但是不影响运行。为什么出现，因为我们的需求是要寻找子集菜单，而子集菜单是children【1】项，就是下标为1的那个，但是所有的项并不都是有下拉菜单，这样就会导致在运行中找不到下标为【1】的children，就会报错。
此时正常
此时报错
把鼠标放入首页上就报错，
怎么解决
1，在没有children【1】项的地方添加一个空标签，促使执行时找到有第二个子节点
2，通过if判断length的长度，比较复杂，但是更适合开发使用
