管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

纯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="#" _ewebeditor_ta_href="%23" title="管理资源吧">管理资源吧</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23" title="About">CSS特效</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23" title="Portfolio">源码下载</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23" title="Store">广告联系</a></li> 
</ul> 
</div> 
</body> 
</html>

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

教程首页更多教程