全力少年

JForum源码学习研究5-JForum的mvc框架原理 | 中国靠人力赚钱，外国人靠资本市场圈钱？

2008-04-10

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;