类似淘宝一样的纯CSS导航菜单

2024-09-05 12:19:34

字体：大中小

来源：转载

供稿：网友

非常精致的类似淘宝一样的菜单导航条，鼠标滑过变色，这里用到一个背景图片，请运行时自行下载。本导航条用纯CSS代码实现，没有用到任何的JS代码，因此实用性和兼容性大大增强，有时候JS的东西在火狐及其它浏览器内会存在不兼容的问题，这一个绝对你会喜欢哦！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS类似淘宝一样的导航菜单</title><style>.tab{float:left; font-size:12px; line-height:1.8}.tab li{display:inline;}.tab li a{background:url(/jscss/demoimg/200904/xgb.gif) no-repeat;float:left;text-decoration:none;}.tab li a span{ display:block; background:url(/jscss/demoimg/200904/xgb.gif) no-repeat; padding:5px 10px 5px 20px;}.tab a:link,.tab a:visited{ background-position:right -51px; text-decoration:none}.tab a:hover,.tab a:active,.tab a.on,.tab a.on:link,.tab a.on:visited{ background-position:right -162px;}.tab a:link span,.tab a:visited span{ background-position:0 0; color:#FFF; text-decoration:none}.tab a:hover span,.tab a:active span,.tab a.on span,.tab a.on:link span,.tab a.on:visited span{ background-position:0 -107px; color:#000;}.tab .one a:link span,.tab .one a:visited span{ background-position:left -262px; padding-left:30px;}.tab .one a:hover span,.tab .one a:active span,.tab .one .on:link span,.tab .one .on:visited span{ background-position:left -212px; padding-left:30px; color:#000}</style></head><body><ul class="tab"> <li class="one">开源首页</li> <li>聊天留言</li><li>企业建站</li><li>论坛社区</li><li>新闻文章</li><li>CMS系统</li><li>博客日记</li><li>影音视频</li><li>商务商城</li><li>小偷采集</li></ul></body></html>

上一篇：CSS实现Windows风格的菜单按钮

下一篇：另类个性竖向纯CSS导航栏

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注