Menu css and scroll table

Discussion in 'CSS' started by lucylsd, Nov 14, 2008.

  1. #1
    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!

    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;
    }
    
    Code (markup):
    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>
    
    Code (markup):
     
    lucylsd, Nov 14, 2008 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Is there a working version of this somewhere we can look at? I really can't tell what you're trying to do, why you are scrolling something that drops down? Or why a drop-down is in a table??

    I do assume you have a good reason to do so, but I just can't see how it's supposed to look or act.
     
    Stomme poes, Nov 14, 2008 IP
  3. lucylsd

    lucylsd Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hi,
    I'm sorry, but I can not show them a version on the Internet, because it is not yet in production.
    Working for a bank, and the table and menus asking me to make them well .. but I don't know what else to do.
    Thank you.
    Lucy
     
    lucylsd, Nov 16, 2008 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #4
    But whatever these people want, they must have seen it somewhere, or they wouldn't know what they wanted, right?

    Some other bank might have this thing?
     
    Stomme poes, Nov 20, 2008 IP