title: a:hover not working on menu li items
body: <p>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 :)</p>
  
  <p>Here´s CSS:</p>
  
  <pre><code>.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;  
  }  
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="menu_container"&gt;
  &lt;div class="main_menu"&gt;  
  &lt;ul&gt;  
  &lt;li&gt;&lt;a href="index.html"&gt;HOME&lt;/a&gt;&lt;/li&gt;  
  &lt;li&gt;&lt;a href="quienes_somos.html" class="selected" &gt;QUIÉNES SOMOS&lt;/a&gt;&lt;/li&gt;  
  &lt;li&gt;&lt;a href="consultoria.html"&gt;Consultoría&lt;/a&gt;&lt;/li&gt;  
  &lt;li&gt;&lt;a href="capacitacion.html"&gt;Capacitación&lt;/a&gt;&lt;/li&gt;  
  &lt;li&gt;&lt;a href="academico.html"&gt;Académico / ARTÍCULOS&lt;/a&gt;&lt;/li&gt;  
  &lt;li&gt;&lt;a href="alianzas.html"&gt;Alianzas&lt;/a&gt;&lt;/li&gt; 
  &lt;li&gt;&lt;a href="proyectos.html"&gt;Proyectos&lt;/a&gt;&lt;/li&gt;  
  &lt;li&gt;&lt;a href="contacto.html"&gt;Contacto&lt;/a&gt;&lt;/li&gt;   
  &lt;/ul&gt;  
  &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>