总步骤：7 难易度：中
本节所用的素材请在素材库的如下路径获得
案例部分'案例8淘宝商城的全局导航
 |
问题描述
随着网站内容的逐渐增多，传统的一栏或者双栏导航已经没有办法将所有的内容罗列出来了。所以，现在很多网站，尤其是综合性的新闻和电子商务网站，开始采用可伸缩的全局导航来帮助用户寻找到自己感兴趣的类目。可伸缩的意思就是当用户的鼠标在一级分类上悬停时，一级分类下属的二级和三级分类就会显示出来，而当用户结束悬停后，二级和三级分类就会收缩起来。具体的效果，大家可以参考如下网站
下面我们就以淘宝商城为例，来实现一个简单的可伸缩全局导航的高保真效果。
广州网站建设,网站建设,广州网页设计,广州网站设计
问题分析
为了描述方便，我们以淘宝商城的页面为例，定义如下两个区域，A区域是正常情况下显示出来的区域，B区域是鼠标悬停之后才会显示出来的部分。如下图
 |
当鼠标在A区域（一级分类区域）悬停的时候，A区域的背景色会变深，同时，B区域（二级分类区域）和B区域中的内容会出现，并且可以点击。当鼠标从A区域的上，左，下方向移出移出A区域的时候，A区域的背景色变浅，恢复原状，B区域及其中的内容隐藏。
广州网站建设,网站建设,广州网页设计,广州网站设计
当鼠标从A区域的右侧移出A区域进入B区域时，B区域仍然可见；当鼠标从B区域的上，右，下方移出B区域的时候，A区域的背景色变浅，B区域及其中的内容隐藏。当鼠标从B区域的左侧移出并且直接进入A区域的时候，B区域仍然可见，但是如果从B区域的左侧移出并且没有进入A区域，那么A区域背景色变浅，B区域隐藏。（我疯了！）
也就是说，当鼠标从A和B的非共同边界移出的时候，我们都要将A的颜色恢复，并且将B隐藏。整个可伸缩导航就是由多个这样的A区域和B区域组合而成的。
用个示例图可以说的更清楚一点（感谢上帝！）：
 |
