網頁制作poluoluo文章簡介:級聯菜單使用了純CSS的方式.
這次給項目做的級聯菜單使用了純CSS的方式,霍霍,能用CSS做的,就用CSS完成吧。
早已有前輩完成過這樣的實例了,我以為我能順利完成,但沒想到處處碰壁,故記錄一點心得如下,供大家參閱。
廢話不多說,咚咚咚,開始制作啦!
除了IE6這個堅強的孩子,其他浏覽器攻克還是比較容易的。
運行代碼框
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]
該實例完成大概就兩個要點:
而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產生的效果),將不用再另寫樣式代碼,不僅節省了代碼開銷,而且可維性更好;(這個是省時省力的關鍵)
<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的話將出現onmouseout時上一次顯示的optionGroup仍然不消失的情況
.c_subNav .li:hover ul { visibility:visible;}
4.table的設置: [含淚ing]table一定要記得width:100%;啊,一定要記得啊,一定要記得啊,一定要記得啊。
最後完成效果:
運行代碼框
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]