No replies
lucylsd
Offline
newbie
Last seen: 10 years 27 weeks ago
Joined: 2008-11-14
Posts: 1
Points: 0

Hi!
I have a table with a drop-down menus, the problem is that the table has scroll, and the menu is not visible when it is the end, it gets below the table. I put the code for them if I can help.
Thanks!

.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;
}

HTML

<!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;">
			<li>
				<a href="#" 
 
id="imgAcciones">Acciones&nbsp;
				<table><tr><td>
				<ul>
					<li><a href="#" title="Modificar" 
 
id="imgModificar">Modificar</a></li>
					<li><a href="#" title="Consultar" 
 
id="imgConsultar">Consultar</a></li>
					<li><a href="#" title="Eliminar" 
 
id="imgEliminar">Eliminar</a></li>
				</ul>
				</td></tr></table></a>
			</li>
		</ul>
		</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;">
			<li>
				<a href="#" 
 
id="imgAcciones">Acciones&nbsp;
				<table><tr><td>
				<ul>
					<li><a href="#" title="Modificar" 
 
id="imgModificar">Modificar</a></li>
					<li><a href="#" title="Consultar" 
 
id="imgConsultar">Consultar</a></li>
					<li><a href="#" title="Eliminar" 
 
id="imgEliminar">Eliminar</a></li>
				</ul>
				</td></tr></table></a>
			</li>
		</ul>
		</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;">
			<li>
				<a href="#" 
 
id="imgAcciones">Acciones&nbsp;
				<table><tr><td>
				<ul>
					<li><a href="#" title="Modificar" 
 
id="imgModificar">Modificar</a></li>
					<li><a href="#" title="Consultar" 
 
id="imgConsultar">Consultar</a></li>
					<li><a href="#" title="Eliminar" 
 
id="imgEliminar">Eliminar</a></li>
				</ul>
				</td></tr></table></a>
			</li>
		</ul>
		</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;">
			<li>
				<a href="#" 
 
id="imgAcciones">Acciones&nbsp;
				<table><tr><td>
				<ul>
					<li><a href="#" title="Modificar" 
 
id="imgModificar">Modificar</a></li>
					<li><a href="#" title="Consultar" 
 
id="imgConsultar">Consultar</a></li>
					<li><a href="#" title="Eliminar" 
 
id="imgEliminar">Eliminar</a></li>
				</ul>
				</td></tr></table></a>
			</li>
		</ul>
		</td>
	</tr>
	</table></div>
</body>
</html>