還原了淘寶首頁最頂部的導航欄，包括了各個導航的下拉列表等（位置對齊稍微有些偏差，畢竟沒有原版設計圖），用到了jquery，js，CSS3等知識。沒有花時間去做錄屏GIF，就幾張效果圖看下：如下
原始導航欄進去后如上圖，當鼠標划過后下拉菜單出現，本身的背景色改變等。如下：
上圖為區域選擇，每個區域都是一個鏈接
上圖是收藏夾，聯系客服的下拉列表
上圖是網站導航的下拉列表
接下來說下主要的步驟和其中的難點：
一、整個導航欄布局（HTML布局）
布局還是很簡單的，主要就是將上部導航欄先作為一個整體區域設置一個塊，中間寬度明確的部位（淘寶首頁有內容的寬度部位，作為與淘寶首頁其他還未完成的頁面同樣寬度）設置一個塊，然后再設置左右浮動的兩個DIV，最后對左右兩個區塊里的區域進行布局，每個下拉列表，每個內容文字可以算一個塊。大概示意圖如下：
布局示意圖（紅綠橙最邊線其實是重合的，原則就是大框套小框）
HTML代碼示意圖如下：
需要注意塊的浮動方式，左右兩個浮動塊分別是左和右浮動，但里面的小塊都是左浮動的。需要把左右浮動塊（top_header_left和top_header_right）相對於父級或者祖級元素固定起來，也就是通過position:relative和position:absolute的方式來進行布局。（尺寸稍微與淘寶官網有一定出入，無原設計圖）。
二、下拉菜單的做法（jquery和JS）
這里我搜索了很多方法后選取的最簡單的一種方法了，主體思想是采用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;}
接下來就是主題的控制下拉的JS代碼：
$(".ChooseArea").children("ul").hide();//頁面加載開始隱藏
$(".ChooseArea").hover(function(){
$(this).children("ul").show();//鼠標滑過顯示
},function(){
$(this).children("ul").hide();//然后鼠標划出隱藏
});
還有一個菜單欄最右側的下拉符號，這個是采用的背景圖的方法，將下拉箭頭切圖后作為背景圖再次插入。代碼如下：
background:url("../images/icon/down.png") 65px center no-repeat
65px是像素值，是以文字作為參考，從文字的左側離開65px距離。如果是寫left則，下拉箭頭在文字左側，寫rigth就在右側，但是距離很近，所以這里采用了像素值來盡量還原淘寶官網。
三、兩個圖標的下拉菜單（購物車和收藏夾）
這兩個地方是類似，但不完全相同。購物車區域相對簡單些，兩個圖標的設置和上一點中插入背景圖的方法一樣，只需要在background后面再多加一個url地址插入購物車圖標就可以了，地址也是根據設計圖來進行調整。
收藏夾區域因為有下拉菜單，而且鼠標滑過后圖標的星變成實心了，所以變的比較麻煩。這里就不再多說布局，鼠標滑過效果還有背景圖標插入問題了，重點說下這個收藏星變成實心的問題。開始我想着是星因為填充變成了實心，也想着用hover來改變文字或者背景顏色，但無論怎么做都無法實現那個效果，查了很多資料，最后發現，這其實是兩個圖，也就是說空心的星，和實心的星是兩個一樣大小的背景圖標。這樣就簡單了，在hover方法中再重新寫入背景圖就好了。我這里沒有再去找和官網一樣的實心的星，另外放了個，所以效果稍微不同。
四、最難的部分，網站導航的下拉列表（HTML/CSS/JS/JQuery）
說最難的部分，其實是因為內容多了，布局方法，顯示方法其實都是和上面說過的一樣的。布局及大小也是按上述的position方法來設定，然后單獨在這里面又分為了4個小區域，再在小區域里進行編輯。布局結構如下：
對每個區域設置了大小后，就是內部的內容編輯，這里難點是上標，鼠標滑過的背景色，還有對齊的問題。
1、上標的設置，采用<sup></sup>方法，並沒有直接插入文字里，而是對需要標記的內容設為hot或new類，在JS代碼中實現上標的插入，JS代碼如下：
$(function(){//設置熱賣和新品上標 var hot="<sup><img src='images/icon/hot.png'></sup>"; $(".hot").append(hot); var New="<sup><img src='images/icon/new.png'></sup>"; $(".New").append(New); });
這里因為我是切圖的，所以沒有動態效果，如果有原本的設計GIF圖，則插入后會有一定的動態效果。
2、鼠標滑過的背景色
這里其實涉及到對齊的問題，最開始的時候我對齊是考慮所有的文字都設置一個整體的寬度，能容納6個字加一個上標的，就是精彩推薦里的“阿里巴巴認證”，然后發現雖然可以實現對齊效果及背景色改變的問題，但與淘寶官網不符。官網的背景色大小是隨着文字內容變化而變化的。所以首先保證內容中a標簽的width為auto，這樣才是跟隨文字更新的。再設置hover方法改變文字顏色為白色，背景色每個區域單獨設置就好了。代碼如下：
.market_list>div:first-of-type dd a:hover{background-color:#fc4200;color:#f5f5f5;} .market_list>div:nth-of-type(2) dd a:hover{background-color:#9fb838;color:#f5f5f5;} .market_list>div:nth-last-of-type(2) dd a:hover{background-color:#d75696;color:#f5f5f5;} .market_list>div:last-of-type dd a:hover{background-color:#2e9fdb;color:#f5f5f5;}
這里面用到了CSS3的first-of-type（第一個前面說的這個元素）、nth-of-type(n)（開始的第n個）、nth-last-of-type（n）（倒數的第n個）、last-of-type（最后一個）這些選擇器。實現了對每個區域不同顏色的設置。其實簡單點的肯定是對區域塊設置id或div直接選擇就可以，這里也是試驗下這些選擇器。
3、文字對齊
文字對齊真的是折磨了我很久。
①開始想的采用所有的文字都在同一寬度的小塊里，然后根據設計圖設置margin值就可以了，但是這樣背景色的設置就會有問題。
②然后考慮既然左邊都是在一邊的，那么margin-left的值應該是固定的，這樣的想法確實是正確的，但也存在問題，首先第一列元素離左邊框的距離也是margin-left值，這樣就不是設計圖了，這也沒問題，使用text-indent設置一個負值就可以正確排版。但我設置之后發現無論再怎么設置都無法設置hover的背景色了，最后發現原因了，原來是text-indent方法的原因，相當於把文字從別個區域位移過來的，設置的背景色還在原來未移動的那里，而且還不可見。所以好不容易想出來的這種方法泡湯了，如果沒有背景色改變的需求，還是可以用的。
③只有這種麻煩的方法了，每個區域對不同長度的文字設置不同的類名，每一種單獨設置margin值，最后才形成了需要的效果。當然肯定效果和官網有一定差異。
④其實我還用JS折騰了好久，想根據JS函數判斷文字內容長度，然后自動設置margin值。然后發現，相同長度的文字在不同區域的margin值不一樣，JS代碼一樣很復雜。還不如直接最簡單的直接CSS實現。
所以最后發現，其實還是需要自己多細心、多認真的調整些，可以使頁面優化。