蓝色垂直滑动效果的CSS导航

蓝色垂直滑动效果的CSS导航

分类：CSS菜单 时间：2009-6-16 11:34:55 浏览：553 次

演示效果截图

用到的图片

CSS代码

/* CSS Document */
img{border:0px;}
.flt{float:left;}
.menubg{clear:left; background-color:#6FA9C7; width:202px;}
.menu{float:left; clear:left;
font:bold 11px Helvetica, Arial, sans-serif;}
.menu li {margin:0px 0px 0px 0px;list-style:none;}
.menu a, .menu a:visited {width:186px;height:22px;
margin:0px 0px 2px -32px;position:relative;
display:block;color:#cbe7f5;text-decoration:none;
background:url(menubg2.jpg) no-repeat;
padding:4px 0 0 8px;}
*html .menu a, .menu a:visited {
width:186px;height:22px;
margin:0px 0px 2px -32px;
position:relative;display:block;
color:#cbe7f5;text-decoration:none;
background:url(menubg2.jpg) no-repeat;
padding:4px 0 0 8px;}
.menu a:hover, .menu a:active,
.menu li.current_page_item a,
 .menu li.current_page_item a:visited  {
background:url(menubg1.jpg) no-repeat;
text-decoration:none;}	
.bot{clear:left;}

HTML代码

<img src="images/top.jpg" class="top flt" />
<div class="menubg flt">
<ul class="menu flt">
<li class="current_page_item">
<a href="http://www.865171.cn">Home</a></li>
<li><a href="http://www.865171.cn">About Us</a></li>
<li><a href="http://www.865171.cn">Work</a></li>
<li><a href="http://www.865171.cn">Contact</a></li>
<li><a href="http://www.865171.cn">Location</a></li>
<li><a href="http://www.865171.cn">www.865171.cn</a></li>
</ul>	
</div>
<img src="images/bot.jpg" class="bot flt" />