横向有立体感的CSS按钮式菜单，采用了CSS常用的UL/LI结构，布局方便，将LI定义为按钮样式，鼠标放上后显示出立体效果，整体视觉体验舒服，代码兼容性好，简洁高效。 代码演示： <!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 /> #navigation {<br /> font-family: Arial, Helvetica, sans-serif;<br /> font-size: 9pt;<br /> }<br /> #navigation ul {<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> padding-top: 4px;<br /> }<br /> #navigation li {<br /> display: inline;<br /> }<br /> #navigation a:link, #navigation a:visited {<br /> margin-right: 2px;<br /> padding: 3px 10px 2px 10px;<br /> color: #A62020;<br /> background-color: #FCE6EA;<br /> text-decoration: none;<br /> border-top: 1px solid #FFFFFF;<br /> border-left: 1px solid #FFFFFF;<br /> border-bottom: 1px solid #717171;<br /> border-right: 1px solid #717171;<br /> }<br /> #navigation a:hover {<br /> border-top: 1px solid #717171;<br /> border-left: 1px solid #717171;<br /> border-bottom: 1px solid #FFFFFF;<br /> border-right: 1px solid #FFFFFF;<br /> }<br /> </style><br /> </head><br /> <body id="contact"><br /> <div id="navigation"><br /> <ul><br /> <li class="recipes"><a href="#">源码爱好者</a></li><br /> <li class="contact"><a href="#">开源源码</a></li><br /> <li class="articles"><a href="#">网页特效</a></li><br /> <li class="articles"><a href="#">官方博客</a></li><br /> <li class="articles"><a href="#">友情链接</a></li><br /> <li class="buy"><a href="#">联系我们</a></li><br /> </ul><br /> </div><br /> </body><br /> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>提示：可修改后代码再运行! 文章导航 简洁标准的CSS导航菜单代码，红色高亮风格CSS图标菜单,带有小图片的LI列表菜单
