纯CSS实现的竖向导航菜单


答案：<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>纯CSS竖向导航菜单</title> 
<meta http-equiv="content-type" content="text/html;charset=gb2312"> 
<style type="text/css"> 
body { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
margin: 0; 
font-size: 80%; 
font-weight: bold; 
} 
ul { 
list-style: none; 
margin: 0; 
padding: 0; 
} 
#menu3 { 
width: 160px; 
border: 1px solid #ccc; 
margin: 10px; 
} 
#menu3 li a { 
height: 32px; 
voice-family: "\"}\""; 
voice-family: inherit; 
height: 24px; 
text-decoration: none; 
} 
#menu3 li a:link, #menu3 li a:visited { 
color: #888; 
display: block; 
background: url(/upload/2010-3/20100303231545473.gif); 
padding: 8px 0 0 30px; 
} 
#menu3 li a:hover, #menu3 li a:active { 
color: #ffffff; 
background: url(/upload/2010-3/20100303231637519.png) 0 -32px; 
padding: 8px 0 0 30px; 
} 
</style> 
</head> 
<body> 
<div id="menu3"> 
<ul> 
<li>脚本之家</li> 
<li>CSS特效</li> 
<li>源码下载</li> 
<li>广告联系</li> 
</ul> 
</div> 
</body> 
</html>

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

上一个：爆炸式的JS圆形浮动菜单特效代码
下一个：javascript实现的像java、c#之类的sleep暂停的函数代码

更多图片编程知识: