分析小米商城的导航栏的布局及其动画实现

首先看看小米商城的导航栏，如图：

通过实际测试可以知道，服务和社区不属于下拉菜单，除了这两个，剩下的全是下拉菜单，想成了一个下拉菜单组，一旦鼠标进入下拉菜单组，那么就会有下拉效果，通过也有过渡效果，所以肯定有 transition'属性，目测时间为0.3s左右，一旦鼠标离开下拉菜单组，那么下拉菜单就会收起来，这个比较直观，还有就是下拉菜单选项之间的切换几乎是没有过度效果的。

先来看看怎么布局的，因为服务和社区不属于下拉菜单组，因此可以单独提出来，其他的

小米       手机        红米      电视     笔记本     家电      新品    路由器      智能硬件

可以放到一个下拉菜单组里边

因此是这样的：

<div class="container">

         <ul>  ----下拉菜单组---- 

                  <li>     ----下拉菜单选项----