武林網(wǎng)(www.survivalescaperooms.com)文章簡(jiǎn)介：級(jí)聯(lián)菜單使用了純CSS的方式.

這次給項(xiàng)目做的級(jí)聯(lián)菜單使用了純CSS的方式，霍霍，能用CSS做的，就用CSS完成吧。

早已有前輩完成過(guò)這樣的實(shí)例了，我以為我能順利完成，但沒(méi)想到處處碰壁，故記錄一點(diǎn)心得如下，供大家參閱。

廢話不多說(shuō)，咚咚咚，開(kāi)始制作啦！

除了IE6這個(gè)堅(jiān)強(qiáng)的孩子，其他瀏覽器攻克還是比較容易的。

運(yùn)行代碼框

[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]

該實(shí)例完成大概就兩個(gè)要點(diǎn)：

而IE6下折騰就比較復(fù)雜了，經(jīng)過(guò)頭破血流的教訓(xùn)之后，總結(jié)出關(guān)鍵四點(diǎn)：

1. 原理：IE6僅<a>標(biāo)簽支持:hover偽類，但如果a標(biāo)簽里面再嵌入a標(biāo)簽，里面的a標(biāo)簽將不會(huì)生效，所以必須在之間套加一層<table>；

<!–[if IE 6]><a href="#nogo"><table><tr><td><![endif]–>
內(nèi)容部分可以含有<a>標(biāo)簽
<!–[if IE 6]></td></tr></table></a><![endif]–>

2. 關(guān)鍵樣式名：這個(gè)用于:hover效果的a標(biāo)簽的命名，如果使用與<li>一致的樣式名（在非IE6中是li:hover產(chǎn)生的效果），將不用再另寫(xiě)樣式代碼，不僅節(jié)省了代碼開(kāi)銷，而且可維性更好；（這個(gè)是省時(shí)省力的關(guān)鍵）

<li class="li">
<!–[if IE 6]><a class="li" href="#nogo"><table><tr><td>
<![endif]–>
內(nèi)容部分可以含有<a>標(biāo)簽
<!–[if IE 6]></td></tr></table></a><![endif]–>
</li>

3. visibility的使用：采用display的話將出現(xiàn)onmouseout時(shí)上一次顯示的optionGroup仍然不消失的情況

.c_subNav .li:hover ul { visibility:visible;}

4.table的設(shè)置： [含淚ing]table一定要記得width:100%;啊，一定要記得啊，一定要記得啊，一定要記得啊。

最后完成效果：

運(yùn)行代碼框

[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]