css寫菜單：簡潔注釋版

這裡是簡潔版，主要把 [ 顯示/隱藏 ] 效果給剝離出來給大家研究。
主要是利用了a:hover[ie]，li:hover[非ie]的狀態來做出顯示/隱藏菜單的效果。
關鍵之處：
程式碼
<!--[if IE 7]><!--></a><!--<![endif]-->
這一段注釋表示：只有非IE瀏覽器和IE7才能讀取到 </a>
這樣在非IE瀏覽器及IE7版本的瀏覽器中讀取到的html是：
程式碼
<li><a href="#">導航</a>
<ul><li>二級導航</li></ul>
</li>
程式碼
<!--[if lte IE 6]></a><![endif]-->
這一段注釋代表：只有IE6以及IE6以下版本的瀏覽器才能讀取到 </a>
而在IE6以及IE6以下版本的瀏覽器中讀取到的html就是：
程式碼
<li><a href="#">導航
<ul><li>二級導航</li></ul>
</a>
</li>
有些朋友可能要問：為什麼要搞的那麼複雜，而不都用連結來包含二級列表呢，那樣就只用寫a:hover就可以了，代碼簡單多了。
我個人覺得：
玩標準就要儘可能的去遵循語義。
在IE6以及以下版本中由於不支援a以外標記的hover偽類，所以目前來說只有這個辦法能達到類似的目的，對著IE6...只好放棄語義了。
但我們可不要為了一個IE6而壞了整鍋湯哦，所以有些事情雖然麻煩了點，但還是要做的~ xmlns="http://www.w3.org/1999/xhtml">

• 首頁
  
  

  111112 111112 111112

• 導航2
  
  

  222221 222221 222221

• 導航3
  
  

  333331 333331 333331

• 導航4
  
  

  444441 444441 444441

• 導航5
  
  

  555551 555551 555551

• 導航6
  
  

  666661 666661 666661