CSS简洁的左侧菜单-JS特效-爱易网页

CSS简洁的左侧菜单

日期：2014-05-18　浏览次数：20262 次

以下是程序代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>nav</title> 
<script language="javascript"> 
// JavaScript Document

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; 
</script> 
<style type="text/css"> 
<!-- 
body { 
  font: normal 11px verdana; 
  }

ul { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
  width: 150px; /* Width of Menu Items */ 
  border-bottom: 1px solid #ccc; 
  } 
   
ul li { 
  position: relative; 
  } 
   
li ul { 
  position: absolute; 
  left: 149px; /* Set 1px less than menu width */ 
  top: 0; 
  display: none; 
  }

/* Styles for Menu Items */ 
ul li a { 
  display: block; 
  text-decoration: none; 
  color: #777; 
  background: #fff; /* IE6 Bug */ 
  padding: 5px; 
  border: 1px solid #ccc; /* IE6 Bug */ 
  border-bottom: 0; 
  } 
   
/* Holly Hack. IE Requirement \*/ 
* html ul li { float: left; height: 1%; } 
* html ul li a { height: 1%; } 
/* End */

li:hover ul, li.over ul { display: block; } /* The magic */ 
--> 
</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 Marketing</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>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

CSS简洁的左侧菜单

相关资料更多>

推荐阅读更多>