淘宝首页之导航条——弹出式悬浮菜单
昨天学习了布局，今天要来实现弹出式导航条。布局选的flex布局。
关于弹出式悬浮菜单总结了下大概是以下几步：
1.鼠标放到一级菜单上时二级菜单显示，鼠标移开二级菜单隐藏。
2.打算为二级菜单设置一个div，不同的一级菜单显示不同的内容。（调试了好久，因为innerHTML）。
3.关于高亮，在一级和二级菜单的区域里一级菜单都要高亮显示
先贴代码(请无视效果图里那辣眼睛的颜色)：
flex布局
头部
在实现的时候主要遇到三个问题：
1.因为二级菜单公用一个div，所以要通过innerHTML控制不同一级菜单时候二级菜单的不同内容，一开始我的二级菜单写在
subleft1这个div里面的，在一开始的innerHTML写进去之后，之后不管点哪个一次菜单，div始终是null，所以之后就把二级菜单挪到了一个隐藏的div里就可以了。
2.关于高亮，因为我是通过绑定mouse这个函数实现onmouseover和onmouseout的，在subleft1div绑定的事件我只传了flag，所以在对相应一级菜单设置背景颜色时拿不到目标一级菜单，所以我设置了一个currentlidli 全局变量，把一级菜单的lid赋值给它。
3.关于在绝对定位的div里设置文字距离边框的距离时，该div框的大小也会跟着变，最后是加了box-sizing: border-box;才好的，因为在CSS中，你设置一个元素的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。
box-sizing 属性可以被用来调整这些表现:
content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。