#nav, 
#nav ul {padding:0; margin:0; list-style:none; font: 12px arial, verdana, sans-serif; background:url(/imagenes/transparent.gif); position:relative; z-index:100;}
#nav { height:30px; width:989px; padding:0; background:#002940; }

#nav table {border-collapse:collapse;}
#nav li {float:left;}
#nav li li {float:none;}
/* Un hack para IE5.x y IE6 */
#nav li a li {float:left;}

#nav li a {display:block; float:left; color:#ffffff; height:30px; padding:0 20px 0 20px; line-height:28px; text-decoration:none; white-space:nowrap; font-weight:bold; border-left:1px solid #ffffff;}
.flecha1, .flecha1_der {  background-image:url(/imagenes/flecha1.gif); background-repeat:no-repeat; background-position:right; }
.flecha1_der { border-right:1px solid #ffffff; }
.flecha2 {  background-image:url(/imagenes/flecha2.gif); background-repeat:no-repeat; background-position:right; }
.li_der { border-right:1px solid #ffffff; }
#nav li li a {height:22px; line-height:24px; float:none; background-color:#8599A6; font-weight:normal; font-size:10px; }


#nav li:hover {position:relative; z-index:100;}
#nav a:hover {position:relative; z-index:100; background-color:#006BC6; color:#fff; border-left:1px solid #ffffff;}
#nav li:hover > a {border-left:1px solid #ffffff; background-color:#006BC6; color:#fff;}

#nav :hover  ul {left:0; top:30px; /*border-left:1px solid #ffffff;*/ z-index:300;}
#nav a:hover ul {left:-1px;}

#nav ul {position:absolute; left:-9999px; top:-9999px;}

/* Que podría haber sido tan sencillo si todos los navegadores entiende */ 
/* Mostrar un nivel superior */
#nav li:hover li:hover > ul {left:0; margin-left:100%; top:0;}
/* Mantener los niveles más ocultos */
#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
/* Mostrar ruta seguida */
#nav li:hover li:hover > a {background:#006BC6; color:#fff; /*border-left:1px solid #ffffff;*/}

#nav li a:hover ul li a:hover {background:#006BC6;}

/* Pero IE5.x y IE6 necesidad de este lote, al estilo de la flyouts */ 
/* Mostrar un nivel superior */
#nav a:hover a:hover ul,
#nav a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover a:hover ul
{left:100%; top:0;}

/* Mantener los niveles más ocultos */
#nav a:hover ul ul,
#nav a:hover a:hover ul ul,
#nav a:hover a:hover a:hover ul ul,
#nav a:hover a:hover a:hover a:hover ul ul
{position:absolute; left:-9999px; top:-9999px;}
.cuadro img { border:none; }