简洁标准的CSS导航菜单代码,红色高亮风格。极简洁的标准型CSS菜单,代码少,采用常见的DIV/UL/LI列表的形式,修改二次开发都方便,个人感觉网站还是不要弄的太复杂,毕竟我们都不是太专业,代码复杂化容易给蜘蛛抓取带来麻烦,速度和流量是成正比的哦。 演示: <!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> <title>CSS横向菜单</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <style> #navigation { font-family: Arial, Helvetica, sans-serif; font-size: .9em; } #navigation ul { list-style: none; margin: 0; padding: 0; padding-top: 4px; } #navigation li { display: inline; } #navigation a:link, #navigation a:visited { padding: 3px 10px 2px 10px; color: #FFFFFF; background-color: #B51032; text-decoration: none; border: 1px solid #711515; } #navigation a:hover { color: #FFFFFF; background-color: #711515; } </style> </head> <body> <div id="navigation"> <ul> <li><a href="#">CSS教程</a></li> <li><a href="#">脚本资源</a></li> <li><a href="http://www.veryhuo.com">站长学院</a></li> <li><a href="#">软件下载</a></li> <li><a href="#">CSS教程</a></li> <li><a href="#">脚本资源</a></li> <li><a href="#">站长学院</a></li> <li><a href="#">WEB2.0</a></li> </ul> </div> </body> </html><br /><center>如不能显示效果,请按Ctrl+F5刷新本页,更多网页代码:<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>提示:可修改后代码再运行! 文章导航 纯CSS制作菜单实例:一个红色黑边的纵向菜单ul,li结构的横向CSS菜单,有立体感的按钮菜单