使用的材料：

做成的效果：

事實上，整個過程，還是寫css比較耗時間，主要是瀏覽器兼容性方面和ie的png背景圖片透明搞得比較久

一、瀏覽器兼容性：

主要是css中cursor差異性（其他做的過程中忘了）：

cursor在ie6很奇怪，我開始在li層設置鼠標形狀為手指，ie6顯示無效，向復層的ul，div設置都無效，后來試了設置了li里面的div，奇跡出現了，鼠標手指出現了，這里我理解為：ie6解析dom的時候，設置鼠標作用于標簽內有內容的第一個父元素有效，而且我感覺中，ie6很多方面都存在這樣的設計方案。

二、ie6使png背景圖片變透明

  ie6上，顯示png是不透明的，所以要通過ie特有的透鏡效果，設置png透明，但是為了兼容fx等其他瀏覽器，要用到css hack，就是利用ie特有解析css符號如*，寫在原本css屬性的下面，遇到ie6的時候，ie6解析*，覆蓋原來的css，這樣講好像很復雜，看如下css：

.mun_contant{ width:80px; height:25px; text-align:center; background-image:url(images/menu/tab_normal.png); background-position:center; background-repeat:no-repeat; line-height:235%;}
  *html  .mun_contant{margin:0px auto;  height:25px;width:65px;   line-height:235%; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src="images/menu/tab_normal.png"); background:none;}/** ie6 **/

當遇到ie6的時候，*html下的.mun_contant覆蓋上面的.mun_contant,而其他瀏覽器不識別 *html，所以就跳過

上面的代碼：filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src="images/menu/tab_normal.png"); background:none

就是使用濾鏡解決png透明問題的；但是ie6這樣用的后果是，背景圖片的position設置會無效，背景圖片的位置動不了了，后來我解決的辦法是，移動背景圖片的div塊實現居中

這個導航，還有一個難點，由于沒有使用<a>標簽，1.需要自己寫js實現頁面的跳轉，但是跳轉后，2.點擊的標簽要選中狀態 3.選定的標簽不受鼠標移進移出影響（我設想的是鼠標移出移進事件和點擊事件完全分離，不能產生耦合）

解決：

   第一個好解決，在li加個rev屬性，寫上鏈接的地址，然后綁定點擊事件，獲取點擊event，然后設置window.location=rev.value

   第二個，想了蠻久的，最后考慮到，頁面鏈接刷新的時候，唯一準確的變量就是地址欄的內容，然后我就寫了一個加載監控，遍歷li的rev值，如果匹配地址欄的地址（用到了lastIndexof()），這個li標簽就選定

   第三個，也比較麻煩，后來還好jQuery有個方法為addClass()，可以疊加覆蓋原來的class，這樣就簡單啦，完全就可以分開鼠標移進移出事件和click事件了，是一種疊加思想，原來class是：a鼠標移進移出是addClas（b）和removeClass（b），鼠標選中時，addClass（b_1）（b_1和b的樣式一樣，但是為了疊加，只能取不同的class名字）,當鼠標點中后：a被b_1覆蓋，當鼠標移到被選中的li時，b_1被b覆蓋（兩個樣式內容一樣，所以沒有變化），鼠標移出，remove b，所以這時候被選中的樣式還原為b_1,還是不變