利用bootstrap框架的字体图标和下拉菜单效果，以及css3的动画效果，可以做出比较优雅的按钮式下拉菜单样式
<style> .myBtnStyle .dropdown-menu span{ margin:5px; } .myBtnStyle .dropdown-menu { animation: 0.5s linear fadeIn; //css3新特性animation } @keyframes fadeIn { //通过keyframes规则创建动画特效，原理为将一套css样式逐渐转化成另一种css样式 0%{opacity:0;transform: translateY(-20);} 100%{opacity: 1;transform: translateY(0);} } </style> </head> <body> <div class="container"> <div class="dropdown myBtnStyle open"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> explotion </button> <ul class="dropdown-menu"> <li><a href="#"> <span class="glyphicon glyphicon-headphones"></span> //span标签包裹的字体图标 moving</a></li> <li><a href="#"> <span class="glyphicon glyphicon-headphones"></span> raging</a></li> <li><a href="#"> <span class="glyphicon glyphicon-headphones"></span> daniangmener</a></li> <li><a href="#"> <span class="glyphicon glyphicon-headphones"></span> holy</a></li> </ul> </div> </div> </body>
原文：http://www.cnblogs.com/sticktong/p/7580603.html