CSS简洁的左侧菜单

稿源：互联网 2022-04-04 15:56:46 点击： 6585 撤稿纠错

老外的风格，英文网站比较常见，可自行修改。

以下讨论的是和css 菜单特效相关的CSS简洁的左侧菜单教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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>

关于CSS简洁的左侧菜单的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/200904099.shtml方便下次再访问哦。

·上一篇： 超酷模仿FLASH的跳动菜单
·下一篇： 个性化下拉列表样式

CSS简洁的左侧菜单

文章分类LIST >>返回首页

最新游戏

最新新闻