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

ericxu131

浏览: 189538 次
性别:
来自: 上海

最近访客更多访客>>

12lisu

121PBL

monushise

kbmelody

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

js & ajax & css & html

CSS JavaScript Microsoft Web HTML

今天上网发现了用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;

分享到：

JForum源码学习研究5-JForum的mvc框架原理 | JForum源码学习研究4-编写action

2008-04-10 12:47
浏览 1843
评论(4)
论坛回复 / 浏览 (3 / 5681)
分类:Web前端
查看更多

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以后，都可以了

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论