带有小图片的Li列表菜单，竖向的图标菜单，鼠标放上会变色，对鼠标的响应很符合用户体验，且兼容性好，代码简洁，适宜学习和使用，CSS初学者的一个好范例。 代码演示： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <title>CSS图标菜单</title><br /> <style><br /> ul#nav {<br /> list-style-type: none;<br /> padding: 0;<br /> margin: 0;<br /> }<br /> #nav a:link, #nav a:visited {<br /> display: block;<br /> width: 150px;<br /> padding: 10px 0 16px 32px;<br /> font: bold 80% Arial, Helvetica, sans-serif;<br /> color: #FF9900;<br /> background: url("/uploads/allimg/1103/peppers.gif") top left no-repeat;<br /> text-decoration: none;<br /> }<br /> #nav a:hover {<br /> background-position: 0 -69px;<br /> color: #B51032;<br /> }<br /> #nav a:active {<br /> background-position: 0 -138px;<br /> color: #006E01;<br /> }<br /> </style><br /> </head><br /> <body><br /> <ul id="nav"><br /> <li><a href="http://www.veryhuo.com">烈火首页</a></li><br /> <li><a href="#">联系我们</a></li><br /> <li><a href="#">关于我们</a></li><br /> <li><a href="#">购买我们</a></li><br /> </ul><br /> </body><br /> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>提示：可修改后代码再运行! 文章导航 ul,li结构的横向CSS菜单,有立体感的按钮菜单CSS Sprites整合网页图片的方法
