css - 修改一个li :hover a class to be different from the rest of the same li:hover

Question

我正在努力使 FlynnTec.com 上最右边的“商店”按钮的下 Angular 变圆。我已经尝试了所有我知道的选择器，但出于某种原因“#menu li:hover .menu_right”不起作用，这显然意味着我没有使用正确的选择器。

求助!我是新来的!!

谢谢...

HTML:

<li class="menu_right"><a href="store.html" class="align_right">Store</a>  
</li> 

CSS:

#menu .menu_right {  
float:right;  
margin-right:0px;  
}  
#menu li:hover  {
background: #F4F4F4;  
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
border: 1px solid #777777;  
padding: 4px 9px 4px 9px; 
-moz-border-radius: 5px 5px 0px 0px;  
-webkit-border-radius: 5px 5px 0px 0px;  
border-radius: 5px 5px 0px 0px;  
}
#menu li .align_right {  
/* Rounded Corners */  
-moz-border-radius: 5px 0px 5px 5px;  
-webkit-border-radius: 5px 0px 5px 5px;  
border-radius: 5px 0px 5px 5px;  
}  
#menu li:hover .align_right {  
left:auto;  
right:-1px;  
top:auto;  
}  

Answer 1

添加样式规则

#menu li.menu_right:hover  {
    background: #F4F4F4;  
    background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
    border: 1px solid #777777;  
    padding: 4px 9px 4px 9px; 
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
}