全兼容的纯CSS级联菜单要点浅析

最新推荐文章于 2024-09-16 23:33:40 发布
最新推荐文章于 2024-09-16 23:33:40 发布
阅读量254 收藏
点赞数
文章标签： css 手机 ie 浏览器 email 咨询
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/g727640aaf43/article/details/4379599
版权

参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2
操作系统：Windows
蓝色理想经典论坛首发，转载请注明出处
这次给项目做的级联菜单使用了纯CSS的方式，霍霍，能用CSS做的，就用CSS完成吧。

丰胸早已有前辈完成过这样的实例了，我以为我能顺利完成，但没想到处处碰壁，故记录一点心得如下，供大家参阅。

废话不多说，咚咚咚，开始制作啦！

除了IE6这个坚强的孩子，其他浏览器攻克还是比较容易的




更多详情请登陆：http://www.fu088.cn/?userid=49







  •    话费服务
      

    •    

    •      话费查询
          

      •      
      • 实时话费查询
             
      • 话费余额查询
             
      • 月账单查询
             
      • 月详单查询
             
      • 缴费历史查询
             
      • 资费优选推荐
            

         
         

    •      定制话费信息
          

      •      
      • 定制短信账单
             
      • 话费余额短信提醒
             
      • 定制Email账单
            

         
         

    •      网上交费
          

      •      
      • 网上缴费
             
      • 充值卡缴费
            

         
        


  •    业务办理
      

    •    

    •      日常业务办理
          

      •      
      • 来电显示
             
      • 呼叫等待
             
      • 呼叫转移
             
      • 三方通话
             
      • 来电提醒
             
      • 呼叫保持
             
      • 呼叫转移设置
             
      • 主叫隐藏
             
      • 彩铃
             
      • 国内漫游
             
      • 短信回执
             
      • 12580综合信息
             
      • 关爱一线通
            

         
         

    •      数据业务
          

      •      
      • 手机上网
             
      • GPRS
             
      • 飞信
             
      • 手机报
             
      • 无线音乐俱乐部
             
      • 手机邮箱
             
      • 号簿管家
             
      • WLAN业务
             
      • 彩乐短信
            

         
         

    •      手机报停/报开
          

      •      
      • 手机报停
             
      • 手机复机
            

         
         

    •      梦网查询与退订
         
        


  •    套餐办理与变更
      

    •    
    • GPRS套餐变更
         
    • 产品变更
        


  •    积分计划
      

    •    
    • 积分查询
         
    • 积分兑换
         
    • 积分明细查询
         
    • 积分兑换话费
         
    • 积分兑换历史查询
        


  •    在线客服
      

    •    
    • 号码归属地查询
         
    • 营业厅查询
         
    • 手机仿真
         
    • 在线咨询
        


  •    个人信息管理
      

    •    
    • 个人资料修改
         
    • 服务密码变更
         
    • 服务密码重置
         
    • PUK码查询
         
    • 套餐使用状态查询
         
    • 业务开通状态查询
        


  •    短信息服务


 

该实例完成大概就两个要点：

忌浮忌躁，一步步来，先把最低级的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%;啊，一定要记得啊，一定要记得啊，一定要记得啊。

    最后完成效果：












    •   
         话费服务
        

      •    

      •     
             话费查询
            

        •      
        • 实时话费查询
               
        • 话费余额查询
               
        • 月账单查询
               
        • 月详单查询
               
        • 缴费历史查询
               
        • 资费优选推荐
              

            
           
           

      •     
             定制话费信息
            

        •      
        • 定制短信账单
               
        • 话费余额短信提醒
               
        • 定制Email账单
              

            
           
           

      •     
             网上交费
            

        •      
        • 网上缴费
               
        • 充值卡缴费
              

            
           
          

        

    •   
         业务办理
        

      •    

      •     
             日常业务办理
            

        •      
        • 来电显示
               
        • 呼叫等待
               
        • 呼叫转移
               
        • 三方通话
               
        • 来电提醒
               
        • 呼叫保持
               
        • 呼叫转移设置
               
        • 主叫隐藏
               
        • 彩铃
               
        • 国内漫游
               
        • 短信回执
               
        • 12580综合信息
               
        • 关爱一线通
              

            
           
           

      •     
             数据业务
            

        •      
        • 手机上网
               
        • GPRS
               
        • 飞信
               
        • 手机报
               
        • 无线音乐俱乐部
               
        • 手机邮箱
               
        • 号簿管家
               
        • WLAN业务
               
        • 彩乐短信
              

            
           
           

      •     
             手机报停/报开
            

        •      
        • 手机报停
               
        • 手机复机
              

            
           
           

      •      梦网查询与退订
           
          

        

    •   
         套餐办理与变更
        

      •    
      • GPRS套餐变更
           
      • 产品变更
          

        

    •   
         积分计划
        

      •    
      • 积分查询
           
      • 积分兑换
           
      • 积分明细查询
           
      • 积分兑换话费
           
      • 积分兑换历史查询
          

        

    •   
         在线客服
        

      •    
      • 号码归属地查询
           
      • 营业厅查询
           
      • 手机仿真
           
      • 在线咨询
          

        

    •   
         个人信息管理
        

      •    
      • 个人资料修改
           
      • 服务密码变更
           
      • 服务密码重置
           
      • PUK码查询
           
      • 套餐使用状态查询
           
      • 业务开通状态查询
          

        

    •    短信息服务



     

  •  

g727640aaf43
关注
纯CSS 级联菜单实现代码
09-27
在本文中，我们将深入探讨如何使用纯CSS实现跨浏览器兼容的级联菜单，特别关注对IE6的支持。 首先，级联菜单的基本原理是利用CSS的`:hover`伪类来控制子菜单的显示和隐藏。当鼠标悬停在父菜单项上时，子菜单将会...
简单实现jQuery级联菜单
10-20
同时，还提供了四个按钮，分别对应将选项从源级联菜单添加到目标级联菜单、将所有选项从源级联菜单添加到目标级联菜单、将选项从目标级联菜单移回源级联菜单和将所有选项从目标级联菜单移回源级联菜单。 在层叠样式...
ASP动态级联菜单实现代码
10-30
在ASP（Active Server Pages）开发中，动态级联菜单是一种常见的交互式网页元素，它允许用户在选择一级菜单后，二级菜单会根据所选的一级菜单内容动态加载相关的选项。这种功能在网站导航、分类选择等方面非常实用。...
JavaScript实现级联菜单的方法
10-24
主要介绍了JavaScript实现级联菜单的方法,涉及javascript页面元素操作的相关技巧,需要的朋友可以参考下
CSS——弹性盒子布局（display: flex）
懒羊羊大王的博客
09-14 1551
Flexbox或者是弹性布局，它的全称叫做弹性盒子布局，那么它到底该如何实现呢？从我们熟悉的 display 属性开始。给元素添加 display: flex，该元素变成了一个弹性容器（flex container），它的直接子元素变成了弹性子元素（flex item）。那么我们该如何具体地操作使用呢？下面我们来进行细致深入的学习。
CSS——盒子模型
m0_73557953的博客
09-12 473
margin : auto => 让target元素左右两边的margin都占据尽可能多的空间，就会各占一半，使元素居中。水平方向：margin-left : auto => 让target元素左边的margin占据尽可能多的空间，使元素靠右。首先CSS将所有的元素都看成一个盒子。
《CSS新世界》书评
zhangxueyi的专栏
09-13 470
这本书是“CSS世界三部曲”中的最后一部，全书近600页，内容丰富，涵盖了CSS的全局知识、已有属性的增强、新布局方式、移动开发中的CSS新特性、CSS变量、文本和图像内容的增强、滤镜和混合模式、用户行为相关CSS等多个方面。《CSS新世界》的主要目标是帮助前端开发者突破CSS技能提升的瓶颈，适合具有一定CSS基础的前端开发者阅读。总的来说，《CSS新世界》是一本全面、深入且实用的CSS学习书籍，无论是对于想要深入了解CSS新特性的前端开发者，还是对于希望提升自己CSS技能的读者，都是一本值得一读的好书。
less和css在写法上有什么区别吗？
qq_50853940的博客
09-11 666
【代码】less和css在写法上有什么区别吗？
Layout 布局组件快速搭建
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
09-13 1481
Layout 布局组件快速搭建： 1. 设置主题样式变量 2. 封装公共布局组件 3. 经典布局 4. 水平布局 5. 响应式布局 6. 搭建 Layout 布局组件 7. 添加 Layout 路由配置 8. 启动项目
HTML、CSS实现树状图
p_s_p的博客
09-09 1039
【代码】HTML、CSS实现树状图。
8- 【JavaWeb】用HTML和CSS来创建一个简洁的登录界面
weixin_44329069的博客
09-12 739
我们将使用HTML和CSS来创建一个简洁、现代的登录界面。
CSS——网格布局（display: grid）之上篇
懒羊羊大王的博客
09-16 1590
CSS网格布局（CSS Grid Layout）是一种用于创建复杂网页布局的系统，它允许开发者以二维系统（行和列）来控制元素的布局。跟 Flexbox 类似，网格布局也是作用于两级的 DOM 结构。设置为 display: grid 的元素成为一个网格容器（grid container）。它的子元素则变成网格元素（grid items）。下面将详细介绍网格布局：
使用HTML和CSS制作网页的全面指南
weidl001的博客
09-14 1304
HTML（超文本标记语言）是构建网页的基础语言。它用于定义网页的结构和内容。通过使用不同的标签（tags），我们可以告诉浏览器如何显示文本、图像、链接等。CSS（层叠样式表）用于控制网页的外观和布局。它可以设置文本的颜色、字体、背景、边距等，使网页更加美观和用户友好。通过以上步骤，我们已经了解了如何使用HTML和CSS创建一个简单但完整的网页。主题要点HTML基础了解HTML的结构和常用标签CSS基础理解CSS的语法、选择器和常用属性网页制作步骤规划布局 -> 编写HTML -> 添加CSS实践技巧。
制作论坛帖子页面
qq_61236034的博客
09-13 574
制作论坛帖子页面
CSS调整背景
weixin_74261199的博客
09-16 2072
函数指定，图片的位置可以是本地路径，也可以是网络资源路径。注意：设置图像坐标时，一定要把图像设置为不重复平铺，即。正如刚刚只设置了背景图片，没有设置重复平铺方式，那么。不然图片平铺之后看不出背景图片的位置。设置背景图的起始x坐标，设置背景图的起始y坐标。
CSS 笔记 1
waterHBO的博客
09-12 522
限制最大高度 300 像素， flex-grow: 1;让 当前元素 在剩余空间中， 占据尽可能多的高度，确保它能在中间居中。上下填充 20px，左右填充为0。铺满整个浏览器窗口的宽度。占据父元素的 100%
手机截图如何提取文字？
qq_14945847的博客
02-15 1944
然而，图片中的文字信息往往难以获取，尤其对于那些需要快速获取信息的人们来说，阅读图片中的文字会是一项繁琐且费时的任务。现在，我们有一个好消息要告诉大家：通过使用我们的图片文字提取工具，您将能够轻松地提取图片中的文字信息。您只需要将图片上传到我们的平台，然后工具就会自动识别图片中的文字，并将其转化为可编辑的文本格式，方便您进行编辑、存储和分享。高精度：我们的工具采用了最先进的OCR技术，可以快速准确地从图片中提取文字信息，避免了传统OCR技术中的错误和漏识别问题。将需要提取文字信息的图片上传到我们的平台。
2023年1月手机热门品牌型号排行榜（手机行业趋势分析）
jingcanmou_data的博客
02-15 1686
1月份手机产品在京东平台上的销售量达到640万+，环比增长51.3%，同比去年仍呈增长趋势，增长率为9.5%。
基于java的校园美食交流系统设计与实现.docx
最新发布
09-19
基于java的校园美食交流系统设计与实现.docx
使用AJAX实现动态Web级联菜单
"Web级联菜单的实现方法主要依赖于AJAX技术，它能提高用户体验，减少不必...Web级联菜单的AJAX实现是一个结合了前端JavaScript、CSS和后端服务器处理的典型案例，它展示了如何利用异步通信优化网页交互，提高用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值