Problema solo en Firefox CSS - LINK

Hola a todos!! bueno tengo el siguiente problema, sorprendentemente en firefox!!, no me funciona el link. como que no me toma el href. Les paso el codigo.

CSS

Código HTML :

.menu{
   display:table; margin:30px 0 0 0;}
   
   .menu li{
      list-style:none; float:left; background:url(../img/menu.png) no-repeat;}
   
   .menu li.home{
      width:66px; height:28px;}
      
   .menu li.portafolio{
      background-position:-66px 0; width:99px; height:28px;}
      
   .menu li.quienes{
      background-position:-165px 0; width:122px; height:28px;}
      
   .menu li.servicios{
      background-position:-287px 0; width:99px; height:28px;}
      
   .menu li.contacto{
      background-position:-386px 0; width:99px; height:28px;}

   /*   MENU    HOVER    */
   
   .menu li:hover{ cursor:pointer;}
   
   .menu li.home:hover, .menu li.home_a{
      width:66px; height:28px; background-position:0 -28px;}
      
   .menu li.portafolio:hover, .menu li.portafolio_a{
      background-position:-66px -28px; width:99px; height:28px;}
      
   .menu li.quienes:hover, .menu li.quienes_a{
      background-position:-165px -28px; width:122px; height:28px;}
      
   .menu li.servicios:hover, .menu li.servicios_a{
      background-position:-287px -28px; width:99px; height:28px;}
      
   .menu li.contacto:hover, .menu li.contacto_a{
      background-position:-386px -28px; width:99px; height:28px;}
      
/*   MENU      FINNNNN      ----*/

HML

Código HTML :

<div class="menu">
      <a href="home"><li class="home"></li></a>
      <a href="portafolio"><li class="portafolio"></li></a>
      <a href="quienes_somos"><li class="quienes"></li></a>
      <a href="servicios"><li class="servicios></li></a>
      <a href="contacto"><li class="contacto"></li></a>
   </div>

Algo estoy haciendo mal, pero no encuentro que es, nose que mas probar. Una cosa, si le agrego una letra al link funciona de 10. no se que puede ser.

Bueno desde ya gracias y saludos!!!!

Algo tarde pero mejor que nunca:
Un elemento que es "inline" por naturaleza no puede contener un elemento "block".
Los li deben estar contenidos en su lista (ul)
Los elementos "inline" no tienen tamaño "per sec". Está en función de su contenido. Y hay ciertas propiedades que sólo las puedes aplicar si son declarados como "block", "inline-block"...
Al no tener contenido el enlace (a) no 'mide' ni un px para poder recibir el foco.
El destino de un enlace (href), para ser reconocido como enlace debe ser algo con su extensión (algo.html) o un identificador único (#algo)
Así que lo correcto sería:

Código :

<ul>
<li><a hred="home.html">xxxx</a></li>
<li><a hred="#algo">algo</a></li>
</ul>

Saludos