`
ericxu131
  • 浏览: 190352 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

CSS伪类有意思的用法,可惜ie6不支持

阅读更多
今天上网发现了用CSS做下拉菜单的方法,很有意思的伪类用法,代码如下:

注意这段:

li:hover ul,li.over ul{
    display: block;
}

以前只用过超链接的hover,原来都可以用hover


<style>
	
ul {
  FILTER: progid:DXImageTransform.Microsoft.RevealTrans (duration=0.5,transition=1);
  margin: 0; 
	padding: 0;
	list-style: none;
	width: 116px;
	border-bottom: 1px solid #ccc;
	}
ul li { 
    position: relative;
}

li ul {
    position: absolute;
	left: 116px;
	top: 0;
	display: none;
	}
	
ul li a {
    display: block;
	text-decoration: none;
	color: #777;
	background: #fff;
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0; 
	border-left:1px;
	border-right:1px;
	}
li:hover ul,li.over ul{ 
    display: block;
}
</style>
</head>
<body>
<ul id="nav">  
		    <li><a href="#">Home</a></li>      
	      <li><a href="#">About</a>
			    <ul>          
				   <li><a href="#">History</a></li>
				   <li><a href="#">Team</a></li> 
				   <li><a href="#">Offices</a></li> 
			    </ul>
			   </li>      
	        <li><a href="#">Services</a> 
			    <ul>
				    <li><a href="#">Web Design</a></li>
					<li><a href="#">Internet</a></li>
					<li><a href="#">Hosting</a></li>
					<li><a href="#">Domain Names</a></li>
					<li><a href="#">Broadband</a></li>
				</ul> 
			</li>     
	        <li><a href="#">Contact Us</a>
			    <ul> 
				    <li><a href="#">United Kingdom</a></li>
					<li><a href="#">France</a></li> 
					<li><a href="#">USA</a></li>
					<li><a href="#">Australia</a></li>
				</ul> 
	      </li>    
	    </ul>
</body>
</html>

可惜的是在ie6下面还是要用js过度一下,不过ie7、FF都没问题
startList = function() { 
      if (document.all&&document.getElementById) {
	   navRoot = document.getElementById("nav"); 
	   for (i=0; i<navRoot.childNodes.length; i++) { 
	   node = navRoot.childNodes[i]; 
	   if(node.nodeName=="LI"){
	   node.onmouseover=function() {
	   this.className+="over";
	  
	   }
	   node.onmouseout=function(){
	   this.className=this.className.replace("over","");
	  
	   } 
	   }
		 
		 } 
		 } 
		 }
		 window.onload=startList;
分享到:
评论
4 楼 zxghl 2008-04-16  
==<内容自己删除了>
3 楼 ajaxgo 2008-04-11  
下来菜单最有效的方法,就是css+js改变类名
2 楼 ericxu131 2008-04-10  
xiaoych 写道
我测试了一下:

firefox2.0 支持
IE 8 不支持
IE 8 运行在 Emulate IE7 模式下 不支持

不过加上JS以后,都可以了

好奇怪啊。。。
ie6不支持
ie7支持
ie8又不支持了。。。。。。
我觉得这种写法很实用的,感觉很帅。
不知道微软搞什么。。。
不过ie8现在才beta1,估计应该会改进吧。
1 楼 xiaoych 2008-04-10  
我测试了一下:

firefox2.0 支持
IE 8 不支持
IE 8 运行在 Emulate IE7 模式下 不支持

不过加上JS以后,都可以了

相关推荐

    谷歌浏览器chrome的一些使用技巧分享

    5. **新建IE内核标签/隐身窗口**:对于某些特定网站,Chrome提供了以IE内核模式打开页面的功能,可以在新标签页中选择“使用IE兼容模式”。同时,按下`Ctrl+Shift+N`可快速开启隐身窗口,进行隐私浏览。 6. **任务...

    详解Vue源码中一些util函数

    当我们深入阅读Vue源码时,可以发现许多有意思的util函数,这些函数对于理解和使用Vue框架至关重要。接下来,我们将详细探讨一些Vue中的util函数,如`Object.prototype.toString.call(arg)`和`String(arg)`的区别、...

    hhhhh安卓开发教程大全

    hhhhh安卓开发教程大全

    avem-labs_Avem_1740990015.zip

    avem-labs_Avem_1740990015.zip

    25883-mofangmall.com 微信群管理机器人系统网站.zip

    微信群机器人管理系统源码 微信群机器人管理系统源码 支持同登陆多个微信 源码类型: C/S 开发环境: VS2010 SQL2008R2 菜单功能 1、支持同时登录多个微信 2、支持机器人聊天(笑话,成语接龙、故事会、智力等等) 3、支持签到 4、可自定义回复 5、可自定义红包语 6、支持定期发送公告(如群规,广告)等 1、WeChatRobots后台配置web版 2、数据库在WeiChartGroup.Net/app_data中,附加即可

    https://upload.csdn.net/creation/uploadResources?spm=1003.2018.3001.4314

    https://upload.csdn.net/creation/uploadResources?spm=1003.2018.3001.4314

    名字微控制器_STM32_课程_DeepBlue_1740989720.zip

    名字微控制器_STM32_课程_DeepBlue_1740989720.zip

    S7-200Smart恒压供水程序示例与485通讯实践:操作指南与案例解析,S7-200 Smart可编程控制器恒压供水程序设计与实现,附带485通讯范例,S7-200Smart 恒压供水程序样例+4

    S7-200Smart恒压供水程序示例与485通讯实践:操作指南与案例解析,S7-200 Smart可编程控制器恒压供水程序设计与实现,附带485通讯范例,S7-200Smart 恒压供水程序样例+485通讯样例 ,S7-200Smart; 恒压供水程序样例; 485通讯样例,S7-200Smart程序样例:恒压供水及485通讯应用示例

    Java读写Mifare M1卡IC卡源码

    Java使用JNA、JNI两种不同方式调用DLL、SO动态库方式读写M1卡源码,支持读写M1卡扇区数据、修改IC卡扇区密钥、改写UID卡卡号等功能,支持Windows系统,同时支持龙芯Mips、LoongArch、海思麒麟鲲鹏飞腾Arm、海光兆芯x86_Amd64等架构平台的国产统信、麒麟等Linux系统,内有jna-4.5.0.jar包,vx13822155058 qq954486673

    UDP协议接收和发送数据示例JAVA

    UDP协议接收和发送数据示例JAVA

    VU-DBS项目:深脑刺激器的全程辅助

    本文介绍了范德堡大学深脑刺激器(DBS)项目,该项目旨在开发和临床评估一个系统,以辅助从规划到编程的整个过程。DBS是一种高频刺激治疗,用于治疗运动障碍,如帕金森病。由于目标区域在现有成像技术中可见性差,因此DBS电极的植入和编程过程复杂且耗时。项目涉及使用计算机辅助手术技术,以及一个定制的微定位平台(StarFix),该平台允许在术前进行图像采集和目标规划,提高了手术的精确性和效率。此外,文章还讨论了系统架构和各个模块的功能,以及如何通过中央数据库和网络接口实现信息共享。

    图像识别项目源码资源(Python和C++)

    图像识别”项目源码资源(Python和C++)

    虚拟同步电机与并电网模型的Simulink仿真参数配置与直接使用指南,虚拟同步电机与并电网模型的Simulink仿真:参数齐全,直接使用,同步电机simulink仿真 并电网模型仿真 参数设置好了

    虚拟同步电机与并电网模型的Simulink仿真参数配置与直接使用指南,虚拟同步电机与并电网模型的Simulink仿真:参数齐全,直接使用,同步电机simulink仿真 并电网模型仿真 参数设置好了,可直接使用 ,虚拟同步电机; simulink仿真; 并电网模型仿真; 参数设置; 使用,虚拟同步电机Simulink仿真与并电网模型参数化应用

    三菱FX3U与力士乐VFC-x610变频器通讯案例详解:PLC控制下的变频器操作与设置程序,含接线方式及昆仑通态触摸屏操作指南,三菱FX3U与力士乐VFC-x610变频器通讯案例详解:接线、设置与程序

    三菱FX3U与力士乐VFC-x610变频器通讯案例详解:PLC控制下的变频器操作与设置程序,含接线方式及昆仑通态触摸屏操作指南,三菱FX3U与力士乐VFC-x610变频器通讯案例详解:接线、设置与程序注解,实现频率设定、启停控制与实时数据读取功能。,三菱FX3U与力士乐VFC-x610变频器通讯程序三菱FX3U与力士乐VFC-x610变频器通讯案例程序,有注释。 并附送程序,有接线方式,设置。 器件:三菱FX3U的PLC,力士乐VFCx610变频器,昆仑通态,威纶通触摸屏。 功能:实现频率设定,启停控制,实际频率读取等。 ,三菱FX3U;力士乐VFC-x610变频器;通讯程序;案例程序;注释;接线方式;设置;频率设定;启停控制;实际频率读取;昆仑通态;威纶通触摸屏。,三菱FX3U与力士乐VFC-x610变频器通讯程序及案例:频率控制与读取实践

    xmselect测试用例~~~~~~~~~~~~~~

    xmselect测试用例~~~~~~~~~~~~~~

    Unity-游戏开发-模型资源-科幻武器

    总共包含 32 款 AAA 级科幻武器。四种武器类型,每种有 8 种不同的纹理变化! 所有内容均采用 PBR 材质,可直接用于开发游戏!

    python词云生成器,将txt文本自动分割生成词云图

    python词云生成器,将txt文本自动分割生成词云图

    基于物联网智能化平台的智慧园区解决方案PPT(28页).pptx

    智慧园区,作为现代城市发展的新形态,旨在通过高度集成的信息化系统,实现园区的智能化管理与服务。该方案提出,利用智能手环、定制APP、园区管理系统及物联网技术,将园区的各类设施与设备紧密相连,形成一个高效、便捷、安全的智能网络。从智慧社区到智慧酒店,从智慧景区到智慧康养,再到智慧生态,五大应用板块覆盖了园区的每一个角落,为居民、游客及工作人员提供了全方位、个性化的服务体验。例如,智能手环不仅能实现定位、支付、求助等功能,还能监测用户健康状况,让科技真正服务于生活。而智慧景区的建设,更是通过大数据分析、智能票务、电子围栏等先进技术,提升了游客的游玩体验,确保了景区的安全有序。 尤为值得一提的是,方案中的智慧康养服务,展现了科技对人文关怀的深刻体现。通过智慧手环与传感器,自动感知老人身体状态,及时通知家属或医疗机构,有效解决了“空巢老人”的照护难题。同时,智慧生态管理系统的应用,实现了对大气、水、植被等环境要素的实时监测与智能调控,为园区的绿色发展提供了有力保障。此外,方案还提出了建立全域旅游营销平台,整合区域旅游资源,推动旅游业与其他产业的深度融合,为区域经济的转型升级注入了新的活力。 总而言之,这份智慧园区建设方案以其前瞻性的理念、创新性的技术和人性化的服务设计,为我们展示了一个充满智慧与活力的未来园区图景。它不仅提升了园区的运营效率和服务质量,更让科技真正融入了人们的生活,带来了前所未有的便捷与舒适。对于正在规划或实施智慧园区建设的决策者而言,这份方案无疑提供了一份宝贵的参考与启示,激发了他们对于未来智慧生活的无限遐想与憧憬。

    使用 SignalR 在 .NET Core 8 最小 API 中构建实时通知

    使用 SignalR 在 .NET Core 8 最小 API 中构建实时通知,构建实时应用程序已成为现代 Web 开发中必不可少的部分,尤其是对于通知、聊天系统和实时更新等功能。SignalR 是 ASP.NET 的一个强大库,可实现服务器端代码和客户端 Web 应用程序之间的无缝实时通信。 参考文章:https://blog.csdn.net/hefeng_aspnet/article/details/145990801

    自适应网址导航网站发布页单页网页模板html源码

    自适应网址导航网站发布页单页网页模板html源码,超级好看自适应清新网址导航网站发布页单页网页模板html源码!无论电脑还是手机,这是一个网页单页源码!! 模板无后台模板,无需数据库,上传服务器直接能用。

Global site tag (gtag.js) - Google Analytics