纯CSS 联级菜单完成编码

日期:2021-03-15 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

参加检测的访问器:IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2
实际操作系统软件:Windows
这次给新项目做的联级菜单应用了纯CSS的方法,霍霍,能用CSS做的,就用CSS进行吧。
早就有老前辈进行过这样的案例了,我认为我能圆满进行,但想不到随处栽跟头,故纪录1点心得以下,供大伙儿参考。
空话很少说,咚咚咚,刚开始制做啦!
除IE6这个顽强的孩子,别的访问器攻破還是较为非常容易的。
运作编码框

提醒:您能够先改动一部分编码再运作

该案例进行大约就两个关键点:
忌浮忌躁,1步步来,先把最低等的display:none;做。
“:hover伪类”的应用,默认设置情况“display:none;”,“:hover”时则“display:block;”则能很非常容易进行。
而IE6下折腾就较为繁杂了,历经遍体鳞伤的经验教训以后,总结出重要4点:
1. 基本原理:IE6仅<a>标识适用:hover伪类,但假如a标识里边再嵌入a标识,里边的a标识将不容易起效,因此务必在之间套加1层<table>;

拷贝编码
编码以下:

<!–[if IE 6]><a href="#nogo"><table><tr><td><![endif]–>
內容一部分能够含有<a>标识
<!–[if IE 6]></td></tr></table></a><![endif]–>

2. 重要款式名:这个用于:hover实际效果的a标识的取名,假如应用与<li>1致的款式名(在非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时上1次显示信息的optionGroup依然未消失的状况

拷贝编码
编码以下:

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

4.table的设定: [含泪ing]table1定要记得width:100%;啊,1定要记得啊,1定要记得啊,1定要记得啊。
最终进行实际效果:
运作编码框

提醒:您能够先改动一部分编码再运作