Hola, tengo una tabla con unos menús desplegables, el problema es que la tabla tiene scroll, y el menú desplegable no se ve cuando queda al final, pues se pone por debajo de la tabla. Les pongo el código por si me pueden ayudar.
Gracias y saludos.
Código CSS
código HMTL
Gracias y saludos.
Código CSS
.menu5 {text-align:left; font-family: arial, sans-serif;
position:relative; font-size:11px; vertical-align:middle;width:120px;
list-style-type:none; margin:0; padding:0;float:left; height:25px;}
.menu5 ul {
padding:0; margin:0; list-style-type:none; /* for Firefox */
}
.menu5 li {
float:left; position:relative;
}
.menu5 li a, .menu5 li a:visited {
display:block; text-decoration:none; float:left; color:#02458f;
}
.menu5 li ul {
visibility:hidden; position:absolute; left:0; height:0; overflow:hidden;
}
.menu5 table {
margin:-10px; border-collapse:collapse; font-size:1em; /* font size for
IE5.5 */
}
/* fist line style for IE7 and non-IE browsers and the second line for
IE5.5 and IE6 */
.menu5 li:hover a,
.menu5 li a:hover {
text-decoration:none; margin-left:15px;
}
.menu5 li:hover ul,
.menu5 li a:hover ul {
visibility:visible; background:#fff; border-left:2px solid #98D1EA;
border-right:2px solid #98D1EA; border-bottom:1px solid #98D1EA; left:0;
top:1.7em; overflow:visible; border-top:1px solid #98D1EA;
}
.menu5 li:hover ul li a,
.menu5 li a:hover ul li a {
display:block; font-weight:normal; background:transparent;
text-decoration:none; height:auto; border-bottom:1px solid #98D1EA;
vertical-align:middle;
}
* html .menu5 li a:hover ul li a {
width:10em; w\idth:9em; /* hack for IE5.5 */
}
.menu5 li:hover ul li a:hover,
.menu5 li a:hover ul li a:hover {
text-decoration:none; color:#fff; background:#98D1EA;padding:0px;
margin:0px; border-top:0px; border-right:0px; border-left:0px;
border-bottom:1px solid #98D1EA;
}
.scroll{
overflow: scroll; overflow-x: hidden; height:100px; width:100%;
position:relative; z-index:999999999;
}
#imgModificar{
background-image:url(ataa_es_web_pub/images/editar.gif);
background-repeat:no-repeat; background-position: 5px; height:21px;
padding-left:25px; padding-top:4px; width:80px;
}
#imgConsultar{
background-image:url(ataa_es_web_pub/images/consultar.gif);
background-repeat:no-repeat; background-position: 5px; height:21px;
padding-left:25px; padding-top:4px;width:80px;
}
#imgEliminar{
background-image:url(ataa_es_web_pub/images/eliminar.gif);
background-repeat:no-repeat; background-position: 5px; height:21px;
padding-left:25px; padding-top:4px;width:80px;
}
#imgAcciones{
background-image:url(ataa_es_web_pub/images/menuacciones.gif);
background-repeat:no-repeat; background-position: 59px 7px;
vertical-align:middle; padding-bottom:7px; width:72px; height:11px;
padding-left:3px; padding-top:3px; margin-left:15px;
}
#imgAcciones:hover{
background-image:url(ataa_es_web_pub/images/menuacciones.gif);
background-repeat:no-repeat; background-position: 59px 7px;
vertical-align:middle; padding-bottom:7px; width:72px; height:11px;
padding-left:3px; padding-top:3px; margin-left:15px; border-top:2px solid
#98D1EA; border-left:2px solid #98D1EA; border-right:2px solid #98D1EA;
border-bottom: 1px solid #fff;
}código HMTL
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tabla menú</title>
</head>
<link rel="stylesheet" media="all" type="text/css" href="menu5.css" />
<body>
<div class="scroll">
<table width="100%" border="0" cellspacing="0" cellpadding="0"
class="TablaContenidoCaja" style="z-index:999999999px;">
<tr class="Pijama1" id="obj1">
<td width="20%" class="TextoTablaIzq"><span
id="codReg0">XXXXXXXXX</span></td>
<td width="68%" class="TextoTablaIzq"><span
id="desc0">XXXX</span></td>
<td class="TextoTablaCen">
<ul class="menu5" style=" z-index:99999999;">
[*]
<a href="#"
id="imgAcciones">Acciones
<table><tr><td>
<ul>
[*][url="#"]Modificar[/url]
[*][url="#"]Consultar[/url]
[*][url="#"]Eliminar[/url]
[/list]
</td></tr></table></a>
[/list]
</td>
</tr>
<tr class="Pijama2" id="obj1">
<td width="20%" class="TextoTablaIzq"><span
id="codReg1">XXXXXXXXX</span></td>
<td width="68%" class="TextoTablaIzq"><span
id="desc1">XXXX</span></td>
<td class="TextoTablaCen">
<ul class="menu5" style=" z-index:99999998;">
[*]
<a href="#"
id="imgAcciones">Acciones
<table><tr><td>
<ul>
[*][url="#"]Modificar[/url]
[*][url="#"]Consultar[/url]
[*][url="#"]Eliminar[/url]
[/list]
</td></tr></table></a>
[/list]
</td>
</tr>
<tr class="Pijama1" id="obj1">
<td width="20%" class="TextoTablaIzq"><span
id="codReg0">XXXXXXXXX</span></td>
<td width="68%" class="TextoTablaIzq"><span
id="desc0">XXXX</span></td>
<td class="TextoTablaCen">
<ul class="menu5" style=" z-index:99999997;">
[*]
<a href="#"
id="imgAcciones">Acciones
<table><tr><td>
<ul>
[*][url="#"]Modificar[/url]
[*][url="#"]Consultar[/url]
[*][url="#"]Eliminar[/url]
[/list]
</td></tr></table></a>
[/list]
</td>
</tr>
<tr class="Pijama2" id="obj1">
<td width="20%" class="TextoTablaIzq"><span
id="codReg1">XXXXXXXXX</span></td>
<td width="68%" class="TextoTablaIzq">
<span id="desc1">XXXX</span>
</td>
<td class="TextoTablaCen">
<ul class="menu5" style=" z-index:99999996;">
[*]
<a href="#"
id="imgAcciones">Acciones
<table><tr><td>
<ul>
[*][url="#"]Modificar[/url]
[*][url="#"]Consultar[/url]
[*][url="#"]Eliminar[/url]
[/list]
</td></tr></table></a>
[/list]
</td>
</tr>
</table></div>
</body>
</html>