Hola,
no la tengo clara con css y modificando un menu sencillito tengo el mio mas o menos terminado ...
Las opciones originalmente bajaban produciendo un efecto fulero.
Estoy tratando de que eso no suceda pero resulta que al sacar el mouse
el fondo del menu se me queda pegado.
Perdonen mi ignorancia pero no se que es lo que esta mal y no se bien como debria encarar la solucion.
Les dejo el codigo para que vean lo que digo.
No tiene las imagenes, por lo que se ve terriblemente feo. Sin embargo el error se puede apreciar.
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="" content="text/html; charset=iso-8859-1">
<STYLE type=text/css>
UL.menu1 {
BORDER-RIGHT: #990000 1px solid;
BORDER-TOP: #990000 1px solid;
BORDER-LEFT: #990000 1px solid;
BORDER-BOTTOM: #990000 1px solid;
PADDING-TOP: 0px;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
PADDING-BOTTOM: 0px;
BACKGROUND: #f8f8f8;
MARGIN: 0px;
OVERFLOW: hidden;
WIDTH: 160px;/*14em; */
COLOR: #fff;
LIST-STYLE-TYPE: none;
HEIGHT: 19em;
TEXT-ALIGN: left;
}
UL UL {
/*BORDER-RIGHT: #606 1px solid;*/
BORDER-RIGHT: #990000 1px solid;
/*BORDER-LEFT: #606 1px solid;*/
BORDER-LEFT: #990000 1px solid;
/*BORDER-TOP: #606 1px solid;*/
BORDER-TOP: #990000 1px solid;
/*BORDER-BOTTOM: #606 1px solid;*/
BORDER-BOTTOM: #990000 1px solid;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
PADDING-BOTTOM: 0px;
PADDING-TOP: 0px;
BACKGROUND: #990000;/*#f8f8f8;*/
MARGIN: 0px;
OVERFLOW: hidden;
/*WIDTH: 144px; /* 14em; */ /*ancho del submenu*/
/*HEIGHT: 22em;*/
COLOR: #fff;
LIST-STYLE-TYPE: none;
TEXT-ALIGN: left
}
UL.menu1 TABLE {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 1em;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
BORDER-COLLAPSE: collapse
}
UL.menu1 UL {
MARGIN-LEFT: 1em;
background-color: #990000
}
UL.menu1 LI { /*items del menu*/ /**********Menu Items Global ***/
text-align: center;
TEXT-INDENT: 5px;
/* padding-left: 5px*/
}
UL.menuB LI { /*items del menu*/ /**********Menu AUTORIZACIONES Desplegado***/
text-align: left;
TEXT-INDENT: 5px; /*
background-color: #990000*/
}
UL.menu1 UL.menuCred LI { /*items del menu*//***Menu CREDENCIAL Desplegado***/
text-align: left;
TEXT-INDENT: 5px;/*
background-color: #ffffff;*/
}
UL.menu1 LI.drop { /*items del menu principal*/
MARGIN-BOTTOM: -2px;
height: 30;
}
UL.menu1 LI.dropCredencial { /*items del menu principal*/
MARGIN-BOTTOM: -2px;
height: 30;
background-image: url(boton_credenciales.gif);
background-repeat: no-repeat
}
UL.menu1 LI.dropAutorizaciones{ /*items del menu principal*/
MARGIN-BOTTOM: -2px;
height: 30;
background-image: url(boton_autorizaciones.gif);
background-repeat: no-repeat
}
UL.menu1 LI.dropHorarios{ /*items del menu principal*/
MARGIN-BOTTOM: -2px;
height: 30;
background-image: url(boton_horarios.gif)
}
UL.menu1 LI.droptelefonos{ /*items del menu principal*/
MARGIN-BOTTOM: -2px;
height: 30;
background-image: url(boton_telefonos.gif)
}
UL.menu1 LI.dropLeche{ /*items del menu principal*/
MARGIN-BOTTOM: -2px;
height: 30;
background-image: url(boton_leche.gif)
}
UL.menu1 LI.dropSepelio{ /*items del menu principal*/
MARGIN-BOTTOM: -2px;
height: 30;
background-image: url(boton_sepelio.gif)
}
UL.menu1 LI.dropFaqs{ /*items del menu principal*/
MARGIN-BOTTOM: -2px;
height: 30;
background-image: url(boton_preguntas.gif)
}
UL.menu1 LI A.last {
DISPLAY: block;
WIDTH: 14em;
LINE-HEIGHT: 2em;
HEIGHT: 14em;
background-image: url(boton_revista.gif)
}
UL.menu1 LI A.last:visited {
DISPLAY: block;
WIDTH: 14em;
LINE-HEIGHT: 2em;
HEIGHT: 14em;
background-image: url(boton_revista.gif)
}
UL.menu1 LI A { /*bloque backgound*/
DISPLAY: block;
WIDTH: 14em;
COLOR: #606;
LINE-HEIGHT: 1.9em;
HEIGHT: 2em;
TEXT-DECORATION: none
}
UL.menu1 LI A:visited {
DISPLAY: block;
WIDTH: 14em;
COLOR: #606;
LINE-HEIGHT: 1.9em;
HEIGHT: 2em;
TEXT-DECORATION: none
}
UL.menu1 LI UL {
DISPLAY: none
}
UL.menuB LI UL { /*tst*/
DISPLAY: none
}
UL.menu1 LI:hover A {
BORDER-LEFT-WIDTH: 0px;
BORDER-RIGHT-WIDTH: 0px;
BORDER-TOP-WIDTH: 0px;
BORDER-BOTTOM-WIDTH: 0px;
FONT-WEIGHT: bold;
COLOR: #c00;
}
UL.menu1 LI A:hover {
BORDER-TOP-WIDTH: 0px;
BORDER-LEFT-WIDTH: 0px;
BORDER-RIGHT-WIDTH: 0px;
BORDER-BOTTOM-WIDTH: 0px;
FONT-WEIGHT: bold;
COLOR: #990000;
}
/*
UL.menu1 LI:hover UL {
BORDER-LEFT: #990000 1px solid;
BORDER-RIGHT: #990000 1px solid;
BORDER-TOP: #990000 1px solid;
MARGIN-TOP: -1px;
BORDER-BOTTOM: #990000 1px solid;
DISPLAY: block;
BACKGROUND: #ff0000; /*def;*
WIDTH: 12em;
HEIGHT: 12em
}*/
UL.menu1 LI.dropAutorizaciones A:hover UL { /*Despliegue de Autorizaciones*/
BORDER-LEFT: #990000 1px solid;
BORDER-RIGHT: #990000 1px solid;
BORDER-TOP: #990000 1px solid;
BORDER-BOTTOM: #990000 1px solid;
MARGIN-TOP: -1px;
DISPLAY: block;
BACKGROUND: #ff6600;
WIDTH: 100px; /* 12em; */
HEIGHT: 120px;
}
UL.menu1 LI.dropCredencial A:hover UL { /*Despliegue de Credenciales*/
BORDER-LEFT: #990000 1px solid;
BORDER-RIGHT: #990000 1px solid;
BORDER-TOP: #990000 1px solid;
BORDER-BOTTOM: #990000 1px solid;
MARGIN-TOP: -1px;
DISPLAY: block;
/*BACKGROUND: #ff0000;*/
WIDTH: 145px; /* 12em; */
HEIGHT: 50px;
}
/*
UL.menu1 LI:hover UL LI A {
FONT-WEIGHT: normal;
BACKGROUND: #def;
COLOR: #c00;
HEIGHT: 2em
} */
UL.menu1 LI A:hover UL LI A { /*color items menu */
FONT-WEIGHT: normal;
BACKGROUND: #FFF9F6;
COLOR: #990000;
HEIGHT: 2em
}
/*
UL.menu1 LI:hover UL LI:hover A {
BACKGROUND: #000;
COLOR: #fff
}
*/
UL.menu1 LI A:hover UL LI A:hover { /*color items del menu OVER - seleccionado*/
BACKGROUND: #FF9960;
COLOR: #fff
}
/*********************************************
* tst para acomodar autorizacion desplegable*
* NO se Oculta el fondo rojo */
UL.menu1 LI.dropAutorizaciones UL.menuB{
left: 46px;
position: absolute;
}
/**/
</STYLE>
<!-- Fin estilo especifico de la pagina -->
<meta http-equiv="" content="text/html; charset=iso-8859-1"><meta http-equiv=""
content="text/html; charset=iso-8859-1"></head>
<body bgcolor="#990000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<DIV id=wrapper>
<!-- end of header -->
<DIV id=showcase>
<UL class=menu1>
<LI class="dropCredencial">
<A href="../credencial.htm" target="mainFrame">Credenciales
<!--[if IE 7]><!--></a><!--<![endif]-->
<TABLE>
<TBODY>
<TR>
<TD>
<UL class=menuCred>
<LI>
<A href="../credencial_uso.htm" target="mainFrame">Uso de la Credencial</A>
</LI>
<LI>
<A href="../credencial_requisitos.htm" target="mainFrame">Requisitos Afiliatorios</A>
</LI>
</UL>
</TD>
</TR>
</TBODY>
</TABLE>
<!--[if lte IE 6]></A><![endif]-->
<LI class="dropAutorizaciones">
<A href="../aut.htm" target="mainFrame">Autorizaciones
<!--[if IE 7]><!--></a><!--<![endif]-->
<TABLE>
<TBODY>
<TR>
<TD>
<UL class=menuB>
<LI>
<A href="../aut_medica.htm" target="mainFrame">Médicas</A>
<LI>
<A href="../aut_internado.htm" target="mainFrame">Internados</A>
<LI>
<A href="../aut_ortopedia.htm" target="mainFrame">Ortopédicas</A>
<LI>
<A href="../aut_farma.htm" target="mainFrame">Farmacéuticas</A>
<LI>
<A href="../aut_varias.htm" target="mainFrame">Varias</A>
</LI>
</UL></TD>
</TR>
</TBODY>
</TABLE>
<!--[if lte IE 6]></A><![endif]-->
<LI class=dropHorarios>
<A href="../contenido/horarios.htm" target="mainFrame">Horarios/Atención</a>
<LI class=dropTelefonos>
<A href="../contenido/telefonos_utiles.htm" target="mainFrame">Telefonos Utiles</a>
<LI class="dropLeche">
<A href="../leche.htm" title=Leche target="mainFrame" >Entrega de Leche</A></LI>
<LI class="dropSepelio">
<A href="../sepelios.htm" title=Sepelios target="mainFrame" >Serv. de Sepelio</A></LI>
<LI class="dropFaqs">
<A href="../faqs.htm" title=Faqs target="mainFrame" >Preguntas usuales</A></LI>
<LI><A href="../revista.htm" title="Revista" target="mainFrame" class="last">Revista</A></LI>
</UL>
<!-- end of info -->
</div>
</div>
<div id="extraLeft" style="position:absolute; left:0; top:233;
width:160px; height:200px; z-index:1; visibility: visible;">
<table width="160" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="../imagenes/revista_portada.jpg"></td>
</tr>
</table>
</div>
</body>
</html> Bueno como ven la 1era opcion baja los demas elementos del menu y se oculta.
Lo que busco es que no se bajen las opciones y que se oculte
Bueno, gracias por la atencion y las manitos
