[Ovillo] menú listas y pop up

[sn]

salud a la lista;
el tema es el siguiente. el menú de mi página es una lista, en la que he
utilizado una de las técnicas de remplazo de texto por imágenes.
esta es la lista en cuestión:
"
           <div id="menu">
                          <ul>
                                  <li><a class="a" href="#">Inicio</a></li>
                                  <li><a class="b" href="#">link1</a></li>
                                  <li><a class="c" href="#">link2</a></li>
                                  <li><a class="d" href="#">link3</a></li>
                                  <li><a class="e" href="#">link4</a></li>
                                  <li><a class="f" href="#">link5</a></li>
                                  <li><a class="g" href="#">link6</a></li>
                         </ul>
           </div><!--fin menu-->
"
este es el css:
"
#menu{
    margin :0px;
    padding-top:8px;
    width: 151px;
    max-width:151px;
    float:left;
    position:fixed;
}
#menu a{
   display:block;
}
#menu ul{
   margin :0px;
   padding:0px;
   list-style: none;
   background-color: black;
}
#menu li{
   text-indent:-2000em;
   margin :0px;
   padding:0px;
}
a.a{ height:21px;background-image: url(../../imagenes/menu_r2_c1.gif) ;}
a.b{ height:21px;background-image: url(../../imagenes/menu_r3_c1.gif) ;}
a.c{ height:21px;background-image: url(../../imagenes/menu_r4_c1.gif) ;}
a.d{ height:21px;background-image: url(../../imagenes/menu_r5_c1.gif) ;}
a.e{ height:21px;background-image: url(../../imagenes/menu_r6_c1.gif) ;}
a.f{ height:21px;background-image: url(../../imagenes/menu_r7_c1.gif) ;}
a.g{ height:21px;background-image: url(../../imagenes/menu_r8_c1.gif) ;}

a.a:hover{ height:21px;background-image:
url(../../imagenes/menu_r2_c1_f2.gif) ;}
a.b:hover{ height:21px;background-image:
url(../../imagenes/menu_r3_c1_f2.gif) ;}
a.c:hover{ height:21px;background-image:
url(../../imagenes/menu_r4_c1_f2.gif) ;}
a.d:hover{ height:21px;background-image:
url(../../imagenes/menu_r5_c1_f2.gif) ;}
a.e:hover{ height:21px;background-image:
url(../../imagenes/menu_r6_c1_f2.gif) ;}
a.f:hover{ height:21px;background-image:
url(../../imagenes/menu_r7_c1_f2.gif) ;}
a.g:hover{ height:21px;background-image:
url(../../imagenes/menu_r8_c1_f2.gif) ;}

"
bien, pues ahora el tema es que no me basta con que se haga el rollover de
las imagenes cada vez que pasamos por un elemento de la lista sino que
además cada uno de los enlaces tiene que hacer un efecto popup con una
imagen sobre otra parte de la página.
el html utilizado sería algo así como lo que sigue:
"
<li><a class="a" href="#">Inicio<div class="jarl"><img
src="menu_r2_c2_f2.gif" title="demos" alt="demos"></div></a></li>
"
y el css:
"
a .jarl{
    display:none;
}
a:hover .jarl{
    display:block;
    position:relative;
    left:150px;
    top:-20px;
    width:40px;
    height:18px;
    border:0px;
}
"
de manera ke hacer rollover, se hace visible la imagen dentro de "jarl".
el problema es que al estar el enlace como elemento dentro de la
lista(entre  li y /li), no consigo el efekto, mientras ke si lo saco y lo
dejo como enlace simple, lo hace perfectamente.
he aquí mi dilema. cualquier sugerencia será agradecida.
un saludo.