今天小编跟大家讲解下有关CSS实现自动变为大写的自适应漂亮菜单效果 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS实现自动变为大写的自适应漂亮菜单效果 的相关资料，希望小伙伴们看了有所帮助。
本文实例讲述了CSS实现自动变为大写的自适应漂亮菜单效果。分享给大家供大家参考。具体如下：
这是一款个性的CSS导航栏，如果菜单上的文字是英文的，那么它会自动转化为英文大写格式，还会自动适合菜单文字的宽度，比较省心的菜单，相信你会喜欢。
运行效果截图如下：
在线演示地址如下：
http://demo.aidi.net.cn/js/2015/css-auto-cha-up-style-menu-codes/
具体代码如下：
复制代码代码如下:<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>大块的自适应CSS导航条</title><style>*{ margin:0; padding:0;}body{ background:#fff; color:#666; font:12px/18px Tahoma, Arial, Helvetica, sans-serif; } #codefans_net_menu{ margin:0 auto; width:700px; } #codefans_net_menu ul{ list-style:none; } #codefans_net_menu li{ list-style:none; display:block; float:left; line-height:51px; border:solid #636363; border-width:0 2px 0 2px; background:url(images/menu_005_bg.jpg) repeat-x; height:51px; margin:0 1px 0 0; } #codefans_net_menu li a{ display:block; float:left; color:#fff; text-transform:uppercase; font-size:11px; font-weight:bold; text-decoration:none; padding:0 25px; height:51px; } #codefans_net_menu li a:hover{ color:#fff; background:url(images/menu_005_h.jpg) repeat-x; } #codefans_net_menu li a.current{ display:block; float:left; background:url(images/menu_005_h.jpg) repeat-x; color:#fff; text-transform:uppercase; font-size:11px; font-weight:bold; text-decoration:none; padding:0 25px; } #codefans_net_menu li a:hover.current{ color:#fff; }</style></head><body><div id="codefans_net_menu"><ul><li><a href="" class="current">HomePage</a></li><li><a href="">WEB</a></li><li><a href="">AJAX</a></li><li><a href="">jQuery</a></li><li><a href="">CSS</a></li><li><a href="">Mootools</a></li> </ul></div></body></html>
希望本文所述对大家的CSS网页设计有所帮助。
来源：爱蒂网