蓝色垂直滑动效果的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" />
