還原了淘寶首頁最頂部的導航欄，包括了各個導航的下拉列表等（位置對齊稍微有些偏差，畢竟沒有原版設計圖），用到了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、上標的設定，採用方法，並沒有直接插入文字裡，而是對需要標記的內容設為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實現。

　　所以最後發現，其實還是需要自己多細心、多認真的調整些，可以使頁面優化。