黑色与红色形成的水平CSS导航菜单
2009-08-09 01:31
447 查看
演示效果截图
用到的图片
CSS代码
#foxmenucontainer{height:24px;background:#000; display:block;padding:45px 0 0 15px;} #foxmenu{position:relative;display:block;height:24px; font-size:11px;font-weight:bold; font-family:Arial,Verdana,Helvitica,sans-serif;} #foxmenu ul{margin:0px;padding:0;list-style-type:none;width:auto;} #foxmenu ul li{display:block;float:left;margin:0 1px 0 0;} #foxmenu ul li a{display:block;float:left;color:#fff; text-decoration:none;padding:5px 20px 0 20px;height:19px; background:transparent url(images/foxmenu_bg-OFF.gif) no-repeat top left;} #foxmenu ul li a:hover{color:#fff; background:transparent url(images/foxmenu_bg-OVER.gif) no-repeat top right;} #foxmenu ul li a.current,#foxmenu ul li a.current:hover{ color:#000;background:#fff;}
HTML代码
<div id="foxmenucontainer"> <div id="foxmenu"> <ul> <li><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" class="current">Services</a></li> <li><a href="http://www.865171.cn">Our Work</a></li> <li><a href="http://www.865171.cn">www.865171.cn</a></li> </ul> </div> </div>
相关文章推荐
- 橙色、黑色、栗色形成的水平CSS菜单
- CSS导航菜单—自适应水平菜单
- CSS导航菜单--自适用的斜角水平菜单
- CSS制作水平导航菜单效果
- 纯div+css水平三级导航菜单
- 120个国外的非常优秀的CSS水平导航菜单
- 漂亮的水平导航菜单css+ul li
- 使用CSS双层滑动门技术实现三态玻璃效果水平导航菜单
- 带个形象小图标的黑色水平CSS菜单
- 海豚色水平CSS导航菜单,挺实用
- JS+CSS实现大气的黑色首页导航菜单效果代码
- CSS实现带阴影效果的黑色导航菜单效果
- jQuery+css实现的蓝色水平二级导航菜单效果代码
- 120个非常优秀的CSS水平导航菜单
- CSS导航菜单水平居中的多种方法
- JS+CSS实现漂亮实用的红色导航菜单
- 纯css实现蓝色圆角效果水平导航菜单代码
- 水平导航菜单(DIV+CSS)
- CSS Cookbook创建水平导航菜单
- CSS打造很棒的黑色背景下的导航菜单