纯CSS实现的竖向导航菜单

作者：bea

<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需刷新才能执行]

有用 | 无用

纯CSS实现的竖向导航菜单

猜你喜欢

您可能感兴趣的文章: