這裡是簡潔版，主要把 [ 顯示/隱藏 ] 效果給剝離出來給大家研究。
主要是利用了a:hover[ie]，li:hover[非ie]的狀態來做出顯示/隱藏菜單的效果。
關鍵之處：
程式碼
這一段注釋表示：只有非IE瀏覽器和IE7才能讀取到
這樣在非IE瀏覽器及IE7版本的瀏覽器中讀取到的html是：
程式碼
導航
程式碼
這一段注釋代表：只有IE6以及IE6以下版本的瀏覽器才能讀取到
而在IE6以及IE6以下版本的瀏覽器中讀取到的html就是：
程式碼
導航
有些朋友可能要問：為什麼要搞的那麼複雜，而不都用連結來包含二級列表呢，那樣就只用寫a:hover就可以了，代碼簡單多了。
我個人覺得：
玩標準就要儘可能的去遵循語義。
在IE6以及以下版本中由於不支援a以外標記的hover偽類，所以目前來說只有這個辦法能達到類似的目的，對著IE6...只好放棄語義了。
但我們可不要為了一個IE6而壞了整鍋湯哦，所以有些事情雖然麻煩了點，但還是要做的~
<!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"> <!-- /* PR 50198763 */ * {font-family:"宋體";margin:0;padding:0;} body {padding:15px;} /* 設定table寬度、邊框為0、(IE6) */ .nav ul table {width:100%;border-collapse:collapse;border:0;} /* 預設隱藏下一級ul列表 */ .nav ul li ul {display:none;} /* 當滑鼠經過時顯示下一級ul列表 */ .nav ul li:hover ul, .nav ul li a:hover ul {display:block;width:100%;} /* 好久沒玩...結果不知道哪出錯了，不加粗就是不行。哪位有深入研究滴請詳解~謝 */ .nav li a:hover {font-weight:bold;} /* ====================== 以上為關鍵屬性 ====================== */ /* ====================== 以下各位隨意發揮 ====================== */ /* 修飾樣式一 */ .nav {_width:720px;min-width:720px;} .nav li {float:left;width:120px;display:block;font-size:0;border:solid #ccc;border-width:1px 0;_border:0;} .nav li a {width:120px;display:block;height:16px;padding:5px 0 1px;_border:solid #ccc;_border-width:1px 0;font-size:12px;text-align:center;color:#555;text-decoration:none;background:#f7f7f7;} .nav li:hover a, .nav li a:hover {font-weight:bold;color:red;} .nav li:hover li {border:0;} .nav li li a, .nav li:hover li a {_border:0;font-weight:normal;color:#555;} .nav li li a:hover {color:red;font-weight:normal;} --> </style> </head> <body> <ul> <li class="up">首頁 <!--[if IE 7]><!--><!--<![endif]--><table><tr><td> <ul> <li>111112</li> <li>111112</li> <li>111112</li> </ul> </td></tr></table><!--[if lte IE 6]><![endif]--> </li> <li>導航2 <!--[if IE 7]><!--><!--<![endif]--><table><tr><td> <ul> <li>222221</li> <li>222221</li> <li>222221</li> </ul> </td></tr></table><!--[if lte IE 6]><![endif]--> </li> <li>導航3 <!--[if IE 7]><!--><!--<![endif]--><table><tr><td> <ul> <li>333331</li> <li>333331</li> <li>333331</li> </ul> </td></tr></table><!--[if lte IE 6]><![endif]--> </li> <li>導航4 <!--[if IE 7]><!--><!--<![endif]--><table><tr><td> <ul> <li>444441</li> <li>444441</li> <li>444441</li> </ul> </td></tr></table><!--[if lte IE 6]><![endif]--> </li> <li>導航5 <!--[if IE 7]><!--><!--<![endif]--><table><tr><td> <ul> <li>555551</li> <li>555551</li> <li>555551</li> </ul> </td></tr></table><!--[if lte IE 6]><![endif]--> </li> <li>導航6 <!--[if IE 7]><!--><!--<![endif]--><table><tr><td> <ul> <li>666661</li> <li>666661</li> <li>666661</li> </ul> </td></tr></table><!--[if lte IE 6]><![endif]--> </li> </ul> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
注意裡面是分段的，[ 隨意發揮 ] 。俺先來發揮一下~ （原先沒注意相容，現在相容了...）
<!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"> <!-- /* PR 50198763 */ * {font-family:"宋體";margin:0;padding:0;} body {padding:15px;} /* 設定table寬度、邊框為0、(IE6) */ .nav ul table {width:100%;border-collapse:collapse;border:0;} /* 預設隱藏下一級ul列表 */ .nav ul li ul {display:none;} /* 當滑鼠經過時顯示下一級ul列表 */ .nav ul li:hover ul, .nav ul li a:hover ul {display:block;width:100%;} /* 好久沒玩...結果不知道哪出錯了，不加粗就是不行。哪位有深入研究滴請詳解~謝 */ .nav li a:hover {font-weight:bold;} /* ====================== 以上為關鍵屬性 ====================== */ /* ====================== 以下各位隨意發揮 ====================== */ /* 修飾樣式一 */ .nav {_width:720px;min-width:720px;} .nav {float:left;_height:22px;min-height:22px;border:solid #ccc;border-width:1px 0;} .nav li {float:left;width:120px;display:block;font-size:0;} .nav li a {width:120px;display:block;height:22px;line-height:22px;font-size:12px;text-align:center;color:#555;text-decoration:none;background:#f7f7f7;} .nav li:hover a, .nav li a:hover {border-bottom:0;background:#eee;font-weight:bold;color:red;} .nav li:hover li a, .nav li a:hover a {color:#555;background:#f7f7f7;font-weight:normal;border-bottom:0;} .nav li:hover li a:hover, .nav li a:hover a:hover {background:#fff;color:#333;} --> </style> </head> <body> <ul> <li class="up">首頁 <!--[if IE 7]><!--><!--<![endif]--><table><tr><td> <ul> <li>111112</li> <li>111112</li> <li>111112</li> </ul> </td></tr></table><!--[if lte IE 6]><![endif]--> </li> <li>導航2 <!--[if IE 7]><!--><!--<![endif]--><table><tr><td> <ul> <li>222221</li> <li>222221</li> <li>222221</li> </ul> </td></tr></table><!--[if lte IE 6]><![endif]--> </li> <li>導航3 <!--[if IE 7]><!--><!--<![endif]--><table><tr><td> <ul> <li>333331</li> <li>333331</li> <li>333331</li> </ul> </td></tr></table><!--[if lte IE 6]><![endif]--> </li> <li>導航4 <!--[if IE 7]><!--><!--<![endif]--><table><tr><td> <ul> <li>444441</li> <li>444441</li> <li>444441</li> </ul> </td></tr></table><!--[if lte IE 6]><![endif]--> </li> <li>導航5 <!--[if IE 7]><!--><!--<![endif]--><table><tr><td> <ul> <li>555551</li> <li>555551</li> <li>555551</li> </ul> </td></tr></table><!--[if lte IE 6]><![endif]--> </li> <li>導航6 <!--[if IE 7]><!--><!--<![endif]--><table><tr><td> <ul> <li>666661</li> <li>666661</li> <li>666661</li> </ul> </td></tr></table><!--[if lte IE 6]><![endif]--> </li> </ul> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
