这是一个完整的css ul li实现纵向导航菜单效果，有需要的朋友直接下载就可以使用哦。
效果如下
| 代码如下 |
|
|
<style type="text/css">
#navsite {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 0.7em;
font-weight: bold;
width: 12em;
border-right: 1px solid #666;
padding: 0;
margin-bottom: 1em;
background-color: #9cc;
color: #333;
}
#navsite ul {
list-style: none;
margin: 0;
padding: 0;
}
#navsite ul li {
margin: 0;
border-top: 1px solid #003;
}
#navsite ul li a {
display: block;
padding: 2px 2px 2px 0.5em;
border-left: 10px solid #369;
border-right: 1px solid #69c;
border-bottom: 1px solid #369;
background-color: #036;
color: #fff;
text-decoration: none;
width: 100%;
}
html>body #navsite ul li a {
width: auto;
}
#navsite ul li a:hover {
border-left: 10px solid #036;
border-right: 1px solid #69c;
border-bottom: 1px solid #369;
background-color: #69f;
color: #fff;
}
</style>
html
<div id="navsite">
<ul>
<li><a href="http://www.111cn.net">首页</a></li>
<li><a href="http://www.111cn.net">技术文章</a></li>
<li><a href="http://www.111cn.net">联系我们</a></li>
<li><a href="http://www.111cn.net">提交文章</a></li>
<li><a href="http://www.111cn.net">好主题</a></li>
</ul>
</div>
|
