操作系統：Windows
這次給項目做的多層級選單使用了純CSS的方式，能用CSS做的，就用CSS完成吧。
早已有網友完成過這樣的實例了，以為能順利完成，但沒想到處處碰壁，故記錄一點心得如下，供大家參閱。
除了IE6這個堅強的孩子，其他瀏覽器攻克還是比較容易的。
HTML代碼
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
該實例完成大概就兩個要點：
忌浮忌躁，一步步來，先把最低級的display:none;做。
「:hover偽類」的使用，默認狀態「display:none;」，「:hover」時則「display:block;」則能很容易完成。
而IE6下折騰就比較複雜了，經過頭破血流的教訓之後，總結出關鍵四點：
1. 原理：IE6僅標籤支持:hover偽類，但如果a標籤裡面再嵌入a標籤，裡面的a標籤將不會生效，所以必須在之間套加一層
內容部分可以含有標籤 |
2. 關鍵樣式名：這個用於:hover效果的a標籤的命名，如果使用與
程序代碼
內容部分可以含有標籤 程序代碼 |
3. visibility的使用：採用display的話將出現onmouseout時上一次顯示的optionGroup仍然不消失的情況
程序代碼
.c_subNav .li:hover ul { visibility:visible;}
4.table的設置： [含淚ing]table一定要記得width:100%;啊，一定要記得啊，一定要記得啊，一定要記得啊。
最後完成效果：
運行代碼框
HTML代碼
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
文章提供BAYSTARS DESIGN網頁設計公司
沒有留言:
張貼留言