参与测试的浏览器:IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2
操作系统:Windows
这次给项目做的级联菜单使用了纯CSS的方式,霍霍,能用CSS做的,就用CSS完成吧。
早已有前辈完成过这样的实例了,我以为我能顺利完成,但没想到处处碰壁,故记录一点心得如下,供大家参阅。
废话不多说,咚咚咚,开始制作啦!
除了IE6这个坚强的孩子,其他浏览器攻克还是比较容易的。
运行代码框
提示:您可以先修改部分代码再运行
该实例完成大概就两个要点:
忌浮忌躁,一步步来,先把最低级的display:none;做。
“:hover伪类”的使用,默认状态“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产生的效果),将不用再另写样式代码,不仅节省了代码开销,而且可维性更好;(这个是省时省力的关键)
复制代码代码如下:
<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%;啊,一定要记得啊,一定要记得啊,一定要记得啊。
最后完成效果:
运行代码框
提示:您可以先修改部分代码再运行
操作系统:Windows
这次给项目做的级联菜单使用了纯CSS的方式,霍霍,能用CSS做的,就用CSS完成吧。
早已有前辈完成过这样的实例了,我以为我能顺利完成,但没想到处处碰壁,故记录一点心得如下,供大家参阅。
废话不多说,咚咚咚,开始制作啦!
除了IE6这个坚强的孩子,其他浏览器攻克还是比较容易的。
运行代码框
提示:您可以先修改部分代码再运行
该实例完成大概就两个要点:
忌浮忌躁,一步步来,先把最低级的display:none;做。
“:hover伪类”的使用,默认状态“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产生的效果),将不用再另写样式代码,不仅节省了代码开销,而且可维性更好;(这个是省时省力的关键)
复制代码代码如下:
<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%;啊,一定要记得啊,一定要记得啊,一定要记得啊。
最后完成效果:
运行代码框
提示:您可以先修改部分代码再运行
标签:
CSS,级联菜单
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“纯CSS 级联菜单实现代码”评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新动态
2024年11月14日
2024年11月14日
- 刘德华《劲歌集》24K金碟港版[WAV+CUE][1.2G]
- Faker五冠王什么意思 世界赛五冠王Faker选手介绍
- faker塞拉斯s14决赛什么出装 faker塞拉斯s14决赛出装介绍
- LOLtoc9魔法口令在哪可以找到 2024云顶之弈toc观赛魔法口令兑换码
- 黑鸭子2008《影视经典·珍藏版》试音碟[WAV+CUE]
- 碧娜《温柔吻语2》[WAV+CUE]
- Stravinsky-Symphonies,Volume1-OrquestaSinfonicadeGalicia,DimaSlobodeniouk(2024)[24-
- 外媒评Switch2:向下兼容是关键 但挑战依然存在
- 任天堂提醒:宠物的尿或唾液或会让NS故障 把它放好!
- 《博德3》再创新高 Steam掌机总游玩时长近2000年
- 张玮伽《想你的夜DSD》东升 [WAV+CUE][1G]
- 姚璎格《 粤 24KGOLD》正版低速原抓[WAV+CUE][1G]
- 杨千嬅《如果大家都拥有海》寰亚 [WAV+CUE][998M]
- 孟庭苇.1994-1990-1994钻石精选集2CD(2022环球XRCD限量版)【上华】【WAV+CUE】
- 群星.1998-华纳好情歌精选17首【华纳】【WAV+CUE】