html - 菜单右箭头在悬停时隐藏

Question

我正在尝试制作一个右侧有箭头的菜单。在菜单悬停时，箭头将变为另一种箭头颜色，背景颜色将变为橙色。

菜单在不处于悬停状态时工作正常，但当悬停在菜单上时，箭头隐藏起来。我已尝试使用以下代码，但似乎无法找出问题所在。

HTML

  <div class="sidebar_pages">
    <ul>
        <li><a href="#">Who we are</a></li>
        <li><a href="#">What we do</a></li>
        <li><a href="#">Our Philosophy</a></li>
        <li><a href="#">Our Partners</a></li>
        <li><a href="#">Our Team</a></li>
        <li><a href="#">Contact us</a></li>
    </ul>
  </div>

CSS

.sidebar_pages ul{
    padding: 0;
    margin: 0;
    list-style: none;
}

.sidebar_pages ul li{
    background: url(../images/a2_18.png) no-repeat;
    background-position: 270px 15px;
}

.sidebar_pages ul li:hover{
    background: url(../images/a1_09.png) no-repeat;
    background-position: 270px 15px;
}

.sidebar_pages ul li a{
    line-height: 42px !important;
    height: 42px !important;
    border-bottom: 1px solid #cccccc;
    padding-left: 16px;
    padding-right: 20px;
    font-size: 14px;
    color: #000;
    display: block;
    text-decoration: none;
}

.sidebar_pages ul li a:hover{
    background: #e17226 !important;
    color: #FFF !important;
    font-weight: bold !important;
}

Answer 1

http://jsbin.com/ocefem/1/edit

.sidebar_pages ul{
    padding: 0;
    margin: 0;
    list-style: none;
}

.sidebar_pages ul li{
    background: url(../images/a2_18.png) no-repeat;
    background-position: 270px 15px;
}

.sidebar_pages ul li:hover{
    background: #e17226  url(../images/a1_09.png) no-repeat;   /*changed*/
    background-position: 270px 15px;
}

.sidebar_pages ul li a{
    line-height: 42px !important;
    height: 42px !important;
    border-bottom: 1px solid #cccccc;
    padding-left: 16px;
    padding-right: 20px;
    font-size: 14px;
    color: #000;
    display: block;
    text-decoration: none;
}

.sidebar_pages ul li a:hover{
    /*background: #e17226 !important;*/                       /* removed */
    color: #FFF !important;
    font-weight: bold !important;
}