还原了淘宝首页最顶部的导航栏，包括了各个导航的下拉列表等（位置对齐稍微有些偏差，毕竟没有原版设计图），用到了jquery，js，CSS3等知识。没有花时间去做录屏GIF，就几张效果图看下：如下
原始导航栏进去后如上图，当鼠标划过后下拉菜单出现，本身的背景色改变等。如下：
上图为区域选择，每个区域都是一个链接
上图是收藏夹，联系客服的下拉列表
上图是网站导航的下拉列表
接下来说下主要的步骤和其中的难点：
一、整个导航栏布局（HTML布局）
布局还是很简单的，主要就是将上部导航栏先作为一个整体区域设置一个块，中间宽度明确的部位（淘宝首页有内容的宽度部位，作为与淘宝首页其他还未完成的页面同样宽度）设置一个块，然后再设置左右浮动的两个DIV，最后对左右两个区块里的区域进行布局，每个下拉列表，每个内容文字可以算一个块。大概示意图如下：
HTML代码示意图如下：
需要注意块的浮动方式，左右两个浮动块分别是左和右浮动，但里面的小块都是左浮动的。需要把左右浮动块（top_header_left和top_header_right）相对于父级或者祖级元素固定起来，也就是通过position:relative和position:absolute的方式来进行布局。（尺寸稍微与淘宝官网有一定出入，无原设计图）。
这里我搜索了很多方法后选取的最简单的一种方法了，主体思想是采用hover方法，页面加载后，只显示菜单栏，鼠标滑过后，菜单栏改变背景色，下拉菜单栏按已设定的效果显示。
所以这里其实是要先设置下拉菜单的样式的。首先是下拉菜单的位置和大小，位置一样是和上面说过的一样，通过position:relative和position:absolute的方式来进行布局，将下拉菜单设置为菜单栏的子元素即可。然后是下拉区域的宽度，长度以及边框背景色等，这个就按设计图来给定，如果不给点宽和长，采用auto，则区域根据下拉菜单内容改变大小；再是这个区域选择里有滚动条，采用overflow:auto;文字做浮动为text-align:left；同样单独对下拉菜单，有一个单独的hover方法，来改变鼠标滑过后的背景色。具体CSS代码如下：
.ChooseArea>ul{position:absolute;left:0;top:35px;width:250px;height:270px;overflow:auto;border-left:#f5f5f5 1px solid;border-bottom:#f5f5f5 1px solid;text-align:left;font:12px/30px tahoma;} .ChooseArea>ul>li:hover{background-color:#f5f5f5;} .ChooseArea:hover{background-color:#fff;}