我怎样才能用css实现这个目标？

Question

我不是一个真正的前端人，但我正在努力学习。我从我的设计师那里得到了这个psd，我想知道在菜单项的前面为这个小标签编写样式和标记的最佳方法是什么。

我已经开始使用bootstrap构建其他所有内容但是这就是我目前为菜单所拥有的内容。

再次感谢您的帮助

.sideMenu {
    width: 230px;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 13px;
}

.sideMenu > li {
    overflow: hidden;
    height: 50px;
    line-height: 50px;
    text-indent: 25px;
    position: relative;
    z-index: 2;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #E1E6EF;
    -webkit-backface-visibility: hidden;
    /* Chrome transition flicker & double border fix */
    -webkit-transition: height .2s ease;
        -moz-transition: height .2s ease;
            transition: height .2s ease;
}

.sideMenu > li.open {
    background-color: #F5F5F5;
    position: relative;
    -webkit-backface-visibility: hidden; 
    /* Chrome transition flicker & double border fix */
    -webkit-transition: height .4s ease;
        -moz-transition: height .4s ease;
            transition: height .4s ease;
}

.sideMenu > li.active {
    background-color: #E5E9EA;
    color: #6E787E;
    font-weight: bold;
    border-top: 1px solid #E1E6EF;
}


.sideMenu > li > a {
    display: block;
    height: 50px;
}

Answer 1

这是一个基本的例子。

CSS：

.menu { width: 300px; border-bottom:1px solid #ddd; margin:0; padding:0 }
.menu-item { border-left:5px solid #fff; border-top: 1px solid #ddd; color:#666; list-style:none; padding:5px; }
.menu-item:hover { border-left:5px solid #ddd; background: #eee; }

HTML：

<ul class="menu">
    <li class="menu-item">Item 1</li>
    <li class="menu-item">Item 2</li>
</ul>

http://jsfiddle.net/G2fcY/

TL; DR：使用边框来获取您正在谈论的“蓝色标签”。