本文实例讲述了css实现有立体感的横向按钮式菜单效果代码。分享给大家供大家参考。具体如下：
这是一款横向有立体感的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"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>横向有立体感的css按钮式菜单</title><style>#navigation { font-family: arial, helvetica, sans-serif; font-size: 9pt;}#navigation ul { list-style: none; margin: 0; padding: 0; padding-top: 4px;}#navigation li { display: inline;}#navigation a:link, #navigation a:visited { margin-right: 2px; padding: 3px 10px 2px 10px; color: #a62020; background-color: #fce6ea; text-decoration: none; border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-bottom: 1px solid #717171; border-right: 1px solid #717171;}#navigation a:hover { border-top: 1px solid #717171; border-left: 1px solid #717171; border-bottom: 1px solid #ffffff; border-right: 1px solid #ffffff;}</style></head><body id="contact"><p id="navigation"> <ul> <li class="recipes"><a href="#">脚本之家</a></li> <li class="contact"><a href="#">脚本下载</a></li> <li class="articles"><a href="#">网页特效</a></li> <li class="articles"><a href="#">官方博客</a></li> <li class="articles"><a href="#">友情链接</a></li> <li class="buy"><a href="#">联系我们</a></li> </ul></p></body></html>
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
相关推荐：
利用css3来匹配横屏竖屏的方法
如何利用css3实现3d翻书效果
以上就是css实现有立体感的横向按钮式菜单效果的详细内容。