首页 > 网络编程 > JavaScript > 网页特效 > 导航菜单 > CSS 竖向导航菜单

纯CSS实现的竖向导航菜单

2010-03-03 23:14:19 作者：

纯CSS实战竖向导航菜单，这也算是一个典型的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><a href="#" title="脚本之家">脚本之家</a></li> 
<li><a href="#" title="About">CSS特效</a></li> 
<li><a href="#" title="Portfolio">源码下载</a></li> 
<li><a href="#" title="Store">广告联系</a></li> 
</ul> 
</div> 
</body> 
</html>

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