- HTML css简洁导航，菜单条，经典的水平导航条阄要，纯CSS实现，无JS,无插件，兼容各大浏览器，代码简单，复制代码即可使用。带有鼠标悬停动态效果，鼠标滑过时会在对应菜单文字下显示一个横条，很不错的埃
-
<!DOCTYPE html><html><head><title>HTML css简洁导航</title><style>body{margin: 0;padding: 0;font: 14px/15pt;background: #dad8d9;}#nav{width: 80%;margin: 100px auto;height: 46px;border-radius: 8px;border: 1px solid #cbcbcb;border-bottom: 4px solid #adadad;background: url(http://www.codefans.net/jscss/demoimg/201403/navbg.png") 14.28% center no-repeat,url(http://www.codefans.net/jscss/demoimg/201403/navbg.png") 28.56% center no-repeat,url(http://www.codefans.net/jscss/demoimg/201403/navbg.png") 42.84% center no-repeat,url(http://www.codefans.net/jscss/demoimg/201403/navbg.png") 57.18% center no-repeat,url(http://www.codefans.net/jscss/demoimg/201403/navbg.png") 71.62% center no-repeat,#f3f3f3 url(http://www.codefans.net/jscss/demoimg/201403/navbg.png") 85.80% center no-repeat;}#nav a{display: block;width: 14.28%;height: 46px;line-height: 46px;float: left;border-bottom: 4px solid #adadad;text-align: center;text-decoration: none;color: seagreen;}#nav a:first-child{border-radius: 0 0 0 8px;}#nav a:last-child{border-radius: 0 0 8px 0;}#nav a:hover{border-bottom: 4px solid red;color: red;}#nav a:first-child:hover{border-bottom: 4px solid red;border-radius: 0 0 0 8px;}#nav a:last-child:hover{border-bottom: 4px solid red;}</style></head><body><!--nav--><div id="nav"><a href="#">网站首页</a><a href="#">公司简介</a><a href="#">产品介绍</a><a href="#">经典案例</a><a href="#">企业动态</a><a href="#">在线留言</a><a href="#">通信地址</a></div></body></html>
标签：网站源码
上一篇：二级横向蓝色+白色背景两级菜单条