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

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

CSSJavaScriptMicrosoftWebHTML 
阅读更多
今天上网发现了用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源码学习研究4-编写action
评论
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以后，都可以了
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics