您现在的位置是：网站首页> 编程资料编程资料

纯CSS 级联菜单实现代码_CSS教程_CSS_网页制作_

2021-09-09 597人已围观

简介 参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 操作系统：Windows 这次给项目做的级联菜单使用了纯CSS的方式，霍霍，能用CSS做的，就用CSS完成吧。 早已有前辈完成过这样的实例了，我以为我能顺利完成，但没想到处处碰壁，故记录一点心得如下，供大家

参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2
操作系统：Windows
这次给项目做的级联菜单使用了纯CSS的方式，霍霍，能用CSS做的，就用CSS完成吧。
早已有前辈完成过这样的实例了，我以为我能顺利完成，但没想到处处碰壁，故记录一点心得如下，供大家参阅。
废话不多说，咚咚咚，开始制作啦！
除了IE6这个坚强的孩子，其他浏览器攻克还是比较容易的。
运行代码框

提示：您可以先修改部分代码再运行

该实例完成大概就两个要点：
忌浮忌躁，一步步来，先把最低级的display:none;做。
“:hover伪类”的使用，默认状态“display:none;”，“:hover”时则“display:block;”则能很容易完成。
而IE6下折腾就比较复杂了，经过头破血流的教训之后，总结出关键四点：
1. 原理：IE6仅标签支持:hover伪类，但如果a标签里面再嵌入a标签，里面的a标签将不会生效，所以必须在之间套加一层；

复制代码
代码如下:


内容部分可以含有标签


2. 关键样式名：这个用于:hover效果的a标签的命名，如果使用与
  • 一致的样式名（在非IE6中是li:hover产生的效果），将不用再另写样式代码，不仅节省了代码开销，而且可维性更好；（这个是省时省力的关键）

    复制代码
    代码如下:




  • 内容部分可以含有标签



    • 3. visibility的使用：采用display的话将出现onmouseout时上一次显示的optionGroup仍然不消失的情况

    复制代码
    代码如下:

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

    4.table的设置： [含泪ing]table一定要记得width:100%;啊，一定要记得啊，一定要记得啊，一定要记得啊。
    最后完成效果：
    运行代码框