我正在尝试制作一个右侧有一个箭头的菜单。在菜单悬停时,箭头将变为另一种箭头颜色,背景颜色将变为橙色。
菜单在其不在悬停状态时工作正常,但当悬停在菜单上时,箭头隐藏起来。我已尝试使用以下代码,但似乎无法找出做错了什么。
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;
}