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

最新推荐文章于 2025-07-01 15:48:28 发布

最新推荐文章于 2025-07-01 15:48:28 发布 · 116 阅读

文章标签：

#CSS #JavaScript #Microsoft #Web #HTML #ViewUI

js & ajax & css & html 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用纯CSS实现下拉菜单的方法，并提供了一个具体的示例代码。该方法利用了:hover伪类来控制子菜单的显示与隐藏，适用于现代浏览器如IE7及以上版本和Firefox等。

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