css - :hover not working on menu li items

Question

我在 CSS 中构建了一个垂直菜单，但我无法让 a:hover 工作，它什么也没做。我一直在搜索和审查代码(我是 CSS 的新手)，但无法弄清楚...如果有人有任何建议，非常感谢:)

这是 CSS:

.menu_container{
position: absolute;
float: left;
width: 270px;
margin-top: 220px;  
}
.main_menu ul { 
padding: 0px; 
margin:0px;
list-style-type: none;  
}
.main_menu ul li {
padding-right: 25px;
font-family:Arial, Helvetica, sans-serif; 
font-size:11px; 
letter-spacing:4px;
text-align:right; 
line-height:35px;  
list-style-type:none;  
}
.main_menu ul li a  {  
text-decoration:none;  
color:#999;  
} 
.main_menu ul li a:hover {
text-decoration:none;  
color:#999;  
font-weight:bold;  
background:url(images/circle_grey.gif) right center no-repeat;
padding-right: 25px; 
float:right;
}   
.main_menu ul li a.selected  {
background: url(images/circle.gif) right center no-repeat;
padding-right: 25px; 
float:right;
color: #bc4c9b;
font-weight:bold;  
}  

HTML:

<div class="menu_container">
<div class="main_menu">  
<ul>  
<li><a href="index.html">HOME</a></li>  
<li><a href="quienes_somos.html" class="selected" >QUIÉNES SOMOS</a></li>  
<li><a href="consultoria.html">Consultoría</a></li>  
<li><a href="capacitacion.html">Capacitación</a></li>  
<li><a href="academico.html">Académico / ARTÍCULOS</a></li>  
<li><a href="alianzas.html">Alianzas</a></li> 
<li><a href="proyectos.html">Proyectos</a></li>  
<li><a href="contacto.html">Contacto</a></li>   
</ul>  
</div> 
</div>

Answer 1

菜单在悬停时向左浮动，也在 .selected 类上 float ，这就是导致问题的原因。以下是移除了 float 属性的固定类:

.main_menu ul li a:hover {
  text-decoration:none;  
  color:#999;  
  font-weight:bold;  
  background:url(images/circle_grey.gif) right center no-repeat;
  padding-right: 25px; 
}

.main_menu ul li a.selected  {
  background: url(images/circle.gif) right center no-repeat;
  padding-right: 25px; 
  color: #bc4c9b;
  font-weight:bold;  
}