首頁  >  文章  >  web前端  >  css寫選單:簡潔註解版_經驗交流

css寫選單:簡潔註解版_經驗交流

WBOY
WBOY原創
2016-05-16 12:10:031388瀏覽

這裡是簡單版,主要把 [ 顯示/隱藏 ] 效果給剝離出來給大家研究。
主要是利用了a:hover[ie],li:hover[非ie]的狀態來做出顯示/隱藏選單的效果。
關鍵之處:
 程式碼

這一段註解表示:只有非IE瀏覽器和IE7才能讀取到 
這樣在非IE瀏覽器及IE7版本的瀏覽器中讀取到的html是:
 程式碼

  • 導航
         
    • 二級導航


  •  程式碼

    這段註解代表:只有IE6以及IE6以下版本的瀏覽器才能讀取到 
    而在IE6以及IE6以下版本的瀏覽器中讀取到的html就是:
     程式碼
  • 導航
         
      • 級導覽

           


  • 有些朋友可能要問:為什麼要搞的那麼複雜,而不都用連結來包含二級列表呢,那樣就只用寫a:hover就可以了,程式碼簡單多了。
    我個人覺得:
    玩標準就要盡可能的去遵循語意。
    在IE6以及以下版本中由於不支援a以外標記的hover偽類,所以目前來說只有這個辦法能達到類似的目的,對著IE6...只好放棄語義了。
    但我們可不要為了一個IE6而壞了整鍋湯哦,所以有些事情雖然麻煩了點,但還是要做的~
    陳述:
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn