快捷導(dǎo)航

css寫菜單：簡(jiǎn)潔注釋版

更新時(shí)間：2006年12月11日 00:00:00 作者：

這里是簡(jiǎn)潔版，主要把 [ 顯示/隱藏 ] 效果給剝離出來(lái)給大家研究。
主要是利用了a:hover[ie]，li:hover[非ie]的狀態(tài)來(lái)做出顯示/隱藏菜單的效果。
關(guān)鍵之處：
程序代碼
</a>
這一段注釋表示：只有非IE瀏覽器和IE7才能讀取到 </a>
這樣在非IE瀏覽器及IE7版本的瀏覽器中讀取到的html是：
程序代碼
<li><a href="#">導(dǎo)航</a>
     <ul><li>二級(jí)導(dǎo)航</li></ul>
</li>
程序代碼

這一段注釋代表：只有IE6以及IE6以下版本的瀏覽器才能讀取到 </a>
而在IE6以及IE6以下版本的瀏覽器中讀取到的html就是：
程序代碼
<li><a href="#">導(dǎo)航
     <ul><li>二級(jí)導(dǎo)航</li></ul>
     </a>
</li>
有些朋友可能要問(wèn)：為什么要搞的那么復(fù)雜，而不都用鏈接來(lái)包含二級(jí)列表呢，那樣就只用寫a:hover就可以了，代碼簡(jiǎn)單多了。
我個(gè)人覺(jué)得：
玩標(biāo)準(zhǔn)就要盡可能的去遵循語(yǔ)義。
在IE6以及以下版本中由于不支持a以外標(biāo)記的hover偽類，所以目前來(lái)說(shuō)只有這個(gè)辦法能達(dá)到類似的目的，對(duì)著IE6...只好放棄語(yǔ)義了。
但我們可不要為了一個(gè)IE6而壞了整鍋湯哦，所以有些事情雖然麻煩了點(diǎn)，但還是要做的~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>   <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />   <title>純CSS菜單</title>   <style type="text/css">  </style>   </head>   <body>   <div   id="vvxyksv9kd"   class="nav"> <ul> <li id="vvxyksv9kd"    class="up"><a href="####">首頁(yè) </a><table><tr><td> <ul> <li><a href="####">111112</a></li> <li><a href="####">111112</a></li> <li><a href="####">111112</a></li> </ul> </td></tr></table> </li> <li><a href="####">導(dǎo)航2 </a><table><tr><td> <ul> <li><a href="####">222221</a></li> <li><a href="####">222221</a></li> <li><a href="####">222221</a></li> </ul> </td></tr></table> </li> <li><a href="####">導(dǎo)航3 </a><table><tr><td> <ul> <li><a href="####">333331</a></li> <li><a href="####">333331</a></li> <li><a href="####">333331</a></li> </ul> </td></tr></table> </li> <li><a href="####">導(dǎo)航4 </a><table><tr><td> <ul> <li><a href="####">444441</a></li> <li><a href="####">444441</a></li> <li><a href="####">444441</a></li> </ul> </td></tr></table> </li> <li><a href="####">導(dǎo)航5 </a><table><tr><td> <ul> <li><a href="####">555551</a></li> <li><a href="####">555551</a></li> <li><a href="####">555551</a></li> </ul> </td></tr></table> </li> <li><a href="####">導(dǎo)航6 </a><table><tr><td> <ul> <li><a href="####">666661</a></li> <li><a href="####">666661</a></li> <li><a href="####">666661</a></li> </ul> </td></tr></table> </li> </ul> </div> </body>   </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

注意里面是分段的，[ 隨意發(fā)揮 ] 。俺先來(lái)發(fā)揮一下~ （原先沒(méi)注意兼容，現(xiàn)在兼容了...）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>   <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />   <title>純CSS菜單</title>   <style type="text/css">  </style>   </head>   <body>   <div   id="vvxyksv9kd"   class="nav"> <ul> <li id="vvxyksv9kd"    class="up"><a href="####">首頁(yè) </a><table><tr><td> <ul> <li><a href="####">111112</a></li> <li><a href="####">111112</a></li> <li><a href="####">111112</a></li> </ul> </td></tr></table> </li> <li><a href="####">導(dǎo)航2 </a><table><tr><td> <ul> <li><a href="####">222221</a></li> <li><a href="####">222221</a></li> <li><a href="####">222221</a></li> </ul> </td></tr></table> </li> <li><a href="####">導(dǎo)航3 </a><table><tr><td> <ul> <li><a href="####">333331</a></li> <li><a href="####">333331</a></li> <li><a href="####">333331</a></li> </ul> </td></tr></table> </li> <li><a href="####">導(dǎo)航4 </a><table><tr><td> <ul> <li><a href="####">444441</a></li> <li><a href="####">444441</a></li> <li><a href="####">444441</a></li> </ul> </td></tr></table> </li> <li><a href="####">導(dǎo)航5 </a><table><tr><td> <ul> <li><a href="####">555551</a></li> <li><a href="####">555551</a></li> <li><a href="####">555551</a></li> </ul> </td></tr></table> </li> <li><a href="####">導(dǎo)航6 </a><table><tr><td> <ul> <li><a href="####">666661</a></li> <li><a href="####">666661</a></li> <li><a href="####">666661</a></li> </ul> </td></tr></table> </li> </ul> </div> </body>   </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]