el display block de un <a> cambia el alto de su contenedor <l

Hola a todos, ps mi problema y que ha sido un verdadero quebradero de cabeza en la tarde de hoy , consiste en que tengo un menú de navegación vertical, en el cual necesito que el ancho y el alto del <a> me ocupe todo el espacio del <li> el problema es que cuando cambio el display del elemento <a> en block este me afecta el alto del <li> haciendo imposible que el vinculo ocupe todo el espacio. Por favor si alguien puede decirme porque pasa esto y como solucionarlo se los agradecería muchísimo.

el codigo:

Código HTML :

<nav id="navigation-products">
    <ul>
       <li class="depth0">
           <span class="section-parent">Servicios especializados</span> 
      </li>
        <li class="depth1">
           <a href="#" >Pruebas de alta tención</a> 
      </li>
        <li class="depth1">
           <a href="#" >Confiabilidad</a> 
      </li>
        <li class="depth1">
           <a href="#" >Taller de mantenimiento y reparación</a> 
      </li>
        <li class="depth1">
           <a href="#" >Trabajos en sitio</a> 
      </li>
        <li class="depth1">
           <a href="#" >GestIME: programa de mantenimiento</a> 
      </li>
        <li class="depth0">
           <span class="section-parent">Línea de productos</span> 
      </li>
        <li class="depth1">
           <a href="#" >Equipos de monitoreo</a> 
      </li>
        <li class="depth1">
           <a href="#" >Motores</a> 
      </li>
        <li class="depth1">
           <a href="#" >Servomotores</a> 
      </li>
   </ul>
</nav>

Código CSS :

#navigation-products{
   padding: 5px 0;
}
#navigation-products a{
   display: block;
   width:150px;
   text-decoration: none;
   zoom: 1;
   cursor: pointer;
}
#navigation-products ul{
   margin: 0;
   padding: 0;
}

#navigation-products-title{
   color: #707070;
   font-family: myriad, Arial, Helvetica, sans-serif;
   font-size: 26px;
   font-weight: bold;
   text-align: center;
}
.section-parent{
   color: #363737;
   display: block;
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   font-size: 19px;
   margin: 0 auto;
   padding-top: 8px;   
   width: 80%;
}
.depth0 {
   background-color: #DBDCDD;
   height: 40px;
   margin: 15px 0 6px 4px;
   text-align: left; 
   width: 259px;
}
.depth1{
   background: url(../images/bg-productnav-items.gif) left bottom repeat-x;
   line-height: 100%;
   list-style: disc;
   list-style-position:inside;
   list-style-type: none;
   padding: 0;
   position: relative;
   margin: 0;
   width: 259px;
}
.depth1 a{
   color: #484848;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 17px;
   text-decoration: none;
}
.depth1 a:hover{
   text-decoration: underline;
}
.navigationmodule.expanding .depth1 {
    margin-left:10px;
}
.navigationmodule.expanding .depth2 {
    margin-left:20px;
}
.navigationmodule.expanding .depth3 {
    margin-left:30px;
}
.navigationmodule.expanding .depth4 {
    margin-left:40px;
}
.navigationmodule.expanding .depth5 {
    margin-left:50px;
}

Para que tengan una mejor visualizacion de mi problema. Gracias

la solución mas fácil que se me ocurre es poner esto

Código HTML :

<a href="#" ><li class="depth1">
          Pruebas de alta tención
      </li></a>