Link marcado en menu vertical

Jamati · #1 (**permalink**) 11/04/2008, 06:03

Tengo el siguiente codigo, y quiero que al pasar el mouse por arriba de cada item del menu, quede marcado la opcion original y si yo me muevo por el menu desplegable de X opcion, siga estando marcado el original...

El codigo es este:

Código HTML:

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

ul.menu {width:100px;background:#CC0000;}
ul.menu li {position:relative;border:1px solid #000000;background:#E5E5E5;list-style:none;margin:5px;}
ul.menu li a {display:block;font:bold 11px Arial,Helvetica,sans-serif;color:#000000;}
ul.menu li a:hover {background:#CCCCCC;}
ul.menu li ul {display:none;width:100px;position:absolute;top:10px;left:0px;z-index:1;}
ul.menu li ul li {border:0;margin:0;}

</style>
<script language="JavaScript">
function menu(opcion,llamador){
	var recibe = llamador.getElementsByTagName('ul')[0];
 	if (opcion == 1) { recibe.style.display="block"; } else { recibe.style.display="none"; }
}
</script>
</head>
<body>
<ul class="menu">
  <li onMouseOver="menu(1,this)" onMouseOut="menu(2,this)"><a href="#">FILA 1</a>
    <ul>
      <li><a href="#">SUBFILA 1</a></li>
      <li><a href="#">SUBFILA 2</a></li>
      <li><a href="#">SUBFILA 3</a></li>
    </ul>
  </li>
  <li onMouseOver="menu(1,this)" onMouseOut="menu(2,this)"><a href="#">FILA 2</a>
    <ul>
      <li><a href="#">SUBFILA 1</a></li>
      <li><a href="#">SUBFILA 2</a></li>
      <li><a href="#">SUBFILA 3</a></li>
   </ul>
  </li>
</ul>
<ul class="menu">
  <li onMouseOver="menu(1,this)" onMouseOut="menu(2,this)"><a href="#">FILA 1</a>
    <ul>
      <li><a href="#">SUBFILA 1</a></li>
      <li><a href="#">SUBFILA 2</a></li>
      <li><a href="#">SUBFILA 3</a></li>
    </ul>
  </li>
  <li onMouseOver="menu(1,this)" onMouseOut="menu(2,this)"><a href="#">FILA 2</a>
    <ul>
      <li><a href="#">SUBFILA 1</a></li>
      <li><a href="#">SUBFILA 2</a></li>
      <li><a href="#">SUBFILA 3</a></li>
   </ul>
  </li>
</ul>
</body>
</html>

O sea, quiero que al pasar el mouse por FILA 1 por ejemplo, y moverme por el menu desplegable del mismo, el FILA1:HOVER (por decirlo de alguna forma) siga como si estuviese el mouse encima de el, me entiendo ??

como se hace ??

hades87 · #2 (**permalink**) 11/04/2008, 06:08

eso tendría que mirar de hacerlo con menús anidados en css, y yo no usaría nada de javascript.

Jamati · #3 (**permalink**) 11/04/2008, 12:19

Es lo que quiero hacer, pero la verdad no se me ocurre nada... tienes alguna idea rapida ? como para probar ??