很酷的蓝色垂直滑动CSS菜单

示效果截图

用到的图片

CSS代码

<style type="text/css">
body {background: #222;
font: 10px Verdana, Arial, Helvetica, sans-serif;
margin: 0;padding: 0;}
a:focus {outline: none;}
ul.sidenav {font-size: 1.2em;float: left;
width: 200px;margin: 0;padding: 0;
list-style: none;background: #005094;
border-bottom: 1px solid #3373a9;
border-top: 1px solid #003867;}
ul.sidenav li a{display: block;color: #fff;
text-decoration: none;width: 155px;
padding: 10px 10px 10px 35px;
background: url(sidenav_a.gif) no-repeat 5px 7px;
border-top: 1px solid #3373a9;
border-bottom: 1px solid #003867;}
ul.sidenav li a:hover {
background: #003867 url(sidenav_a.gif) no-repeat 5px 7px;
border-top: 1px solid #1a4c76;}
ul.sidenav li span{	display: none; }
ul.sidenav li a:hover span {display: block;
font-size: 0.8em;padding: 10px 0;}
</style>

HTML代码

<ul class="sidenav">
<li>
	<a href="http://www.865171.cn">www.865171.cn
	<span>免费模板网，提供免费DIV+CSS模板、后台模板、
	DIV+CSS布局网页模板下载，图片图标下载，以及CSS代码、
	CSS菜单、CSS图表等。</span>
	</a>
</li>
<li>
	<a href="http://www.865171.cn">css-tempaltes
	<span>免费模板网，提供免费DIV+CSS模板、后台模板、
	DIV+CSS布局网页模板下载，图片图标下载，以及CSS代码、
	CSS菜单、CSS图表等。</span>
	</a>
</li>
<li>
	<a href="http://www.865171.cn">admin-templates
	<span>免费模板网，提供免费DIV+CSS模板、后台模板、
	DIV+CSS布局网页模板下载，图片图标下载，以及CSS代码、
	CSS菜单、CSS图表等。</span>
	</a>
</li>
</ul>