侧边分类栏

HTML

<div class="content">
    <aside class="public-category">
        <h3>博客分类</h3>
        <div class="menu-cate-container">
            <ul id="menu-cate" class="menu">
                <li id="menu-item-800" class="menu-item"><a href="#">HTML5游戏开发</a>
                    <ul class="sub-menu">
                        <li id="menu-item-833" class="menu-item"><a href="#">开发技巧</a></li>
                        <li id="menu-item-834" class="menu-item"><a href="#">引擎推荐</a></li>
                    </ul>
                </li>
                <li id="menu-item-209" class="menu-item"><a href="#">移动前端开发</a>
                    <ul class="sub-menu">
                        <li id="menu-item-211" class="menu-item "><a href="#">HTML5</a></li>
                        <li id="menu-item-217" class="menu-item"><a href="#">CSS3</a></li>
                        <li id="menu-item-144" class="menu-item"><a href="#">响应式设计</a></li>
                    </ul>
                </li>
                <li id="menu-item-1212" class="menu-item"><a href="#">全栈式Javascript</a>
                    <ul class="sub-menu">
                        <li id="menu-item-1214" class="menu-item"><a href="#">jQuery</a></li>
                        <li id="menu-item-518" class="menu-item"><a href="#">NodeJS</a></li>
                        <li id="menu-item-588" class="menu-item"><a href="#">AngularJS</a></li>
                        <li id="menu-item-1213" class="menu-item"><a href="#">Acoluda</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="cl"> </div>
    </aside>
</div>
    					

CSS

body {
    background: #f9f9f9;
}
h3 {
    background: #72c1eb;
    color: #fff;
    height: 45px;
    line-height: 45px;
    text-align: center;
}
aside {
    background: #fff;
    width: 250px;
    padding: 15px 0;
}
ul, li {
    margin: 0;
    padding: 0;
}
a {
    display: block;
    height: 35px;
    line-height: 35px;
    color: #8e8e8e;
    width: 100%;
    text-align: center;
}