带加号的CSS菜单

Question

我遇到了css sprites的问题，我知道做精灵的最佳方法，但这种方式不适用于我需要做的菜单。

CSS代码

/* SUB MENU
----------------------------------------------------------*/
div#sub-menu{
    position: relative;
    float: left;
    width: 211px;
    padding: 50px 0px 0px;
    z-index: 999;
}
div#sub-menu p{
    font-size: 15px;
    text-transform: uppercase;
    line-height: 25px;
    padding: 0px 36px;
    margin-bottom: 25px;
}
div#sub-menu ul li{
    height: 29px;
    margin: 2px 21px;
    border-bottom: 1px #353535 solid;
}
div#sub-menu ul li:first-child{
    border-top: 1px #353535 solid;
    padding-bottom: 2px;
}
div#sub-menu ul li:first-child a{
    margin: 2px 0px 3px;
}
div#sub-menu ul li a{
    display: list-item;
    width: 138px;
    height: 11px;
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: bold;
    padding: 8px 15px;
}
div#sub-menu ul li a:hover{
    background: #f9c600;
    color: #fff;
}

HTML CODE

<div id="sub-menu"> <p>Produtos</p> <ul> <li><a href="arroz">arroz</a></li> <li><a href="azeite">azeite</a></li> <li><a href="especiarias">especiarias</a></li> </ul> </div>

我需要菜单才能获得最后的加号，当我们将它悬停在标签内时，我可以根据需要提供我使用的精灵。

有人可以帮我吗？

需要最终结果：

JSFiddle

Answer 1

您可以使用css3 ::after，因此您只需添加此

即可

div#sub-menu ul li a::after{
    content:'+';
    color:#000;
    float:right;
    font-size:14px;
    line-height:10px;
}

div#sub-menu ul li a:hover::after{
    color:#fff;
}

DEMO：http://jsfiddle.net/P3Nq5/4/

Answer 2

使用：after（或：before）伪类 - http://jsfiddle.net/michaelburtonray/P3Nq5/2/

这就是我必须添加的内容：

div#sub-menu ul li a{
    position: relative;
}

div#sub-menu ul li a:after {
    content: "+";
    position: absolute;
    right: 0.5em;
}

＆＃34; +＆＃34;符号是一个常见的符号，因此您不需要使用精灵，但如果您必须同时使用：before和：after。这使得标记更长一些。

http://jsfiddle.net/michaelburtonray/P3Nq5/7/

div#sub-menu ul li a{
    position: relative;
}
div#sub-menu ul li a:before,
div#sub-menu ul li a:after {
    content: "";
    position: absolute;
    right: 0.5em;
    width: 10px;
    height: 10px;
}

div#sub-menu ul li a:before {
    background: red;    
}
div#sub-menu ul li a:after {
    background: green;
    opacity: 0;
}


div#sub-menu ul li a:hover:before {
    opacity: 0;
}
div#sub-menu ul li a:after {
    opacity: 1;
}