a:hover not working on menu li items - css

Question

I´m building a vertical menu in CSS, but I can´t get the a:hover to work, it´s just doing nothing. I´ve been searching and reviewing the code (I´m new to CSS), but can´t figure it out...if anyone has any suggestions, much appreciated :)
Here´s 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>HOME</li>
<li><a href="quienes_somos.html" class="selected" >QUIÉNES SOMOS</a></li>
<li>Consultoría</li>
<li>Capacitación</li>
<li>Académico / ARTÍCULOS</li>
<li>Alianzas</li>
<li>Proyectos</li>
<li>Contacto</li>
</ul>
</div>
</div>

Answer 1

The menu was being floated to the left on hover and also on the .selected class and that was what was causing the problem. Here are the fixed classes with the float properties removed:
.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;
}