- 參與測試的瀏覽器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2
- 操作系統(tǒng)：Windows
- 藍色理想經典論壇首發(fā)，轉載請注明出處
這次給項目做的級聯(lián)菜單使用了純CSS的方式，霍霍，能用CSS做的，就用CSS完成吧。
早已有前輩完成過這樣的實例了，我以為我能順利完成，但沒想到處處碰壁，故記錄一點心得如下，供大家參閱。
廢話不多說，咚咚咚，開始制作啦！
除了IE6這個堅強的孩子，其他瀏覽器攻克還是比較容易的。
運行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
該實例完成大概就兩個要點：
- 忌浮忌躁，一步步來，先把最低級的display:none;做。
- “:hover偽類”的使用，默認狀態(tài)“display:none;”，“:hover”時則“display:block;”則能很容易完成。
而IE6下折騰就比較復雜了，經過頭破血流的教訓之后，總結出關鍵四點：
1. 原理：IE6僅<a>標簽支持:hover偽類，但如果a標簽里面再嵌入a標簽，里面的a標簽將不會生效，所以必須在之間套加一層<table>；
<!–[if IE 6]><a href="#nogo"><table><tr><td><![endif]–>
內容部分可以含有<a>標簽
<!–[if IE 6]></td></tr></table></a><![endif]–>
2. 關鍵樣式名：這個用于:hover效果的a標簽的命名，如果使用與<li>一致的樣式名（在非IE6中是li:hover產生的效果），將不用再另寫樣式代碼，不僅節(jié)省了代碼開銷，而且可維性更好；（這個是省時省力的關鍵）
<li class="li">
<!–[if IE 6]><a class="li" href="#nogo"><table><tr><td>
<![endif]–>
內容部分可以含有<a>標簽
<!–[if IE 6]></td></tr></table></a><![endif]–>
</li>
3. visibility的使用：采用display的話將出現(xiàn)onmouseout時上一次顯示的optionGroup仍然不消失的情況
.c_subNav .li:hover ul { visibility:visible;}
4.table的設置： [含淚ing]table一定要記得width:100%;啊，一定要記得啊，一定要記得啊，一定要記得啊。
最后完成效果：
運行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
經典論壇交流：
http://bbs.blueidea.com/thread-2929096-1-1.html
本文鏈接：http://www.95time.cn/tech/web/2009/6777.asp 
出處：藍色理想
責任編輯：bluehearts
◎進入論壇網頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
