一个分类按钮效果，可以学习参考

正在编辑：一个分类按钮效果，可以学习参考

<meta charset="utf-8">
<style type="text/css">
.filter{
    margin-bottom: 15px;
}
.filter dl{
    margin-bottom: 10px;
    position: relative;
}
.filter dl dt{
    border-radius: 2px 0 0 2px;
    background-color: #1e6288;
    padding: 6px 10px 5px;
    text-decoration: none;
    color: #f4f6f8;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
    float: left;
}
.filter dl dd.words{
    margin-left: 80px;
    margin-right: 60px;
    overflow: hidden;
    height: auto;
}
.filter dl dd.open{
    height: auto;
    height: 36px;
}
.filter dl dd.words a{
    background-color: #E4E7EC;
    padding: 6px 10px 5px;
    border-left: 1px solid #f4f6f8;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
    color: #90939A;
    display: inline-block;
    white-space: nowrap;
    margin:0 4px 5px 0;
    float:left;
}
.filter dl dd.words a:hover,.filter dl dd.words a.active{
    background-color: #c80f32;
    color: #f4f6f8;
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
.filter dl dd.more{
    position: absolute;
    right:0;
    top:0;
}
.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}
</style>
<div class="filter clearfix">
            <dl>
                <dt>产品分类</dt>
                <dd class="words">
                    <a class="active" href="/products.html">不限</a>
                <a  href="/products/cms.html">内容管理</a><a  href="/products/shop.html">商城系统</a><a  href="/products/social.html">社交应用</a><a  href="/products/mobile.html">移动应用</a><a  href="/products/develop_help.html">开发辅助</a><a  href="/products/industry.html">行业应用</a><a  href="/products/game.html">游戏娱乐</a><a  href="/products/plugin_extend.html">插件&扩展</a>                </dd>
            </dl>
            <dl>
                <dt>开发语言</dt>
                <dd class="words">
                    <a class="active" href="/products/0_0.html">不限</a>
                <a  href="/products/01_0.html">PHP</a><a  href="/products/02_0.html">Python</a><a  href="/products/03_0.html">Ruby</a><a  href="/products/04_0.html">Java/JSP</a><a  href="/products/05_0.html">Node.js</a><a  href="/products/06_0.html">C/C++</a><a  href="/products/07_0.html">Objective-C/Swift</a><a  href="/products/08_0.html">Perl</a><a  href="/products/09_0.html">C#/.NET</a><a  href="/products/10_0.html">Go</a><a  href="/products/11_0.html">Groovy</a><a  href="/products/12_0.html">JavaScript</a><a  href="/products/13_0.html">HTML/CSS</a><a  href="/products/14_0.html">ActionScript</a><a  href="/products/15_0.html">ErLang</a><a  href="/products/16_0.html">Lua</a><a  href="/products/17_0.html">Sliverlight</a><a  href="/products/18_0.html">其它</a>          </dd>
            </dl>
            <dl>
                <dt>操作系统</dt>
                <dd class="words">
                    <a class="active" href="/products/0_0.html">不限</a>
                <a  href="/products/0_01.html">跨平台</a><a  href="/products/0_02.html">Windows</a><a  href="/products/0_03.html">Linux/Unix</a><a  href="/products/0_04.html">OS X</a><a  href="/products/0_05.html">Android</a><a  href="/products/0_06.html">iPhone/iPad/iPod</a><a  href="/products/0_07.html">Windows Phone</a>                </dd>
            </dl>
        </div>