Error de despliegue en menu.

[lobonegro6]

Hola buenas tardes tengo un pequeño error con mi menu css, resulta q una vez q lo meto en la page se queda por debajo de un div table q tengo. aqui dejo imagen



alguien me podria ayudar con esto. salu2

[kseso?]

Al adivino lo quemaron en la hoguera, así que ahora en el foro de css el encargado de buscar el código perdido es

[lobonegro6]

Sorry aqui pongo el code

CSS

Código PHP:

  * { 
    padding: 0; 
    margin: 0; 
}  
 
body { 
    background: #fff; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    line-height: 18px; 
    color: #333333; 
     
/*    background-image: url(images/markwater.jpg); 
    background-repeat: no-repeat; 
    background-attachment: fixed;*/ 
    /*    font-size: 16px; aliminado para poder usar bien hd de tabla*/ 
} 
 
img { border: none; } 
a { color: #22456F; text-decoration: none;} 
a:hover { text-decoration: underline; color : #000; } 
 
#wrap { 
    margin: 10px auto 0 auto; 
    width: 1200px; 
} 
 
#header {  
    border: 5px solid #003366; 
    height: 100px; 
} 
#header h1 { 
    font-size: 36px; 
    font-weight: 100; 
    letter-spacing: -2px; 
    padding: 12px 0 5px 20px; 
} 
#header h1 a { 
    color: #000; 
    text-decoration: none; 
} 
#header h1 a:hover { 
    color: #02ACF1; 
    text-decoration: none; 
} 
#header h2 { 
    color: #02ACF1; 
    font-size: 20px; 
    font-weight: 100; 
    padding: 0 0 0 50px; 
    letter-spacing: -1px; 
    line-height: 35px; 
} 
 
 
.left { 
    margin-top: 10px; 
    width: 1170px; 
    float: left; 
    text-align: justify; 
    border: 5px solid #003366; 
    padding: 10px; 
} 
.left h2 { 
    color: #01709E; 
    font-size: 24px; 
    /*letter-spacing: 1px;*/ 
    font-weight: 100; 
    padding : 10px 0 15px 0; 
} 
 
hr { 
  border: 0; 
  width: 100%; 
/*  color: #000;*/ 
  background-color: #01709E; 
  height: 5px; 
} 
 
/* TABLE */  
div.fixedHeaderTable { 
    position: relative; 
} 
div.fixedHeaderTable table { 
    width:100%; 
} 
div.fixedHeaderTable tbody { 
    height: 50px; 
    overflow-y: auto; 
    overflow-x: hidden; 
} 
div.fixedHeaderTable table th { 
/*    background-color:#425567;*/ 
background-color: #01709E; 
color: #fff; 
text-align:center; 
font-weight:bold; 
padding: 1px; 
/*border:1px groove #000;*/ 
font-size:16px; 
line-height: 2em; 
white-space: nowrap; 
font-family: verdana,arial,helvetica,sans-serif; 
} 
 
/* HACIENDO LOS ROW AZUL Y GRIS */ 
div.fixedHeaderTable table td { 
background-color:#D3D9F8; 
font-weight:bold; 
font-size:12px; 
text-align:center; 
border:0.5px groove #000; 
/*line-height: 1.5em;*/ 
/*line-heigh: 2em;*/ 
white-space: nowrap; 
font-family: verdana,arial,helvetica,sans-serif; 
} 
 
/**/ 
div.fixedHeaderTable table td.Gris { 
background-color:#f7f7f7; 
font-weight:bold; 
font-size:12px; 
text-align:center; 
border:0.5px groove #000; 
/*line-height: 1.5em;*/ 
/*line-heigh: 2em;*/ 
white-space: nowrap; 
font-family: verdana,arial,helvetica,sans-serif; 
} 
 
 
div.fixedHeaderTable table td.ListadoEditar { 
    background:#FFFFFF; 
} 
div.fixedHeaderTable table td.ListadoEstVerde { 
    /*background:#D3D9F8;*/ 
        background:#67DE58; 
} 
div.fixedHeaderTable table td.ListadoEstAmarillo { 
    /*background:#D3D9F8;*/ 
        background:#EDFC47; 
} 
 
div.fixedHeaderTable thead td, div.fixedHeaderTable thead th { 
    position:relative; 
} 
 
/* IE7 hacks */ 
div.fixedHeaderTable { 
    *position: relative; 
    *height: 420px; 
    *overflow-y: scroll; 
    *overflow-x: hidden; 
    *padding-right:16px; 
} 
div.fixedHeaderTable thead tr { 
    *position: relative; 
    _position: absolute; 
    *top: expression(this.offsetParent.scrollTop-2); 
    *background:none; 
    background-color:#FFFFFF 
} 
 
div.fixedHeaderTable tbody { 
    *height: auto; 
    *position:absolute; 
    *top:50px;    
} 
 
/* IE6 hacks */ 
div.fixedHeaderTable { 
    _width:expression(this.offsetParent.clientWidth-20); 
    _overflow: auto; 
    _overflow-y: scroll; 
    _overflow-x: hidden; 
} 
div.fixedHeaderTable thead tr { 
    _position: relative 
} 
 
 
/* 
.right { 
margin-top: 10px; 
width: 160px; 
float: right; 
border: 5px solid #ddd; 
font-size: 12px; 
padding: 10px; 
} 
.right ul { 
list-style-type: square; 
padding: 5px 10px 10px 20px; 
color: #59799F; 
} 
.right h2 { 
height: 30px; 
font-size: 12px; 
color: #666; 
line-height: 30px; 
} 
.right a { text-decoration: none } 
*/ 
 
#footer { 
    margin-top: 10px; 
    text-align: center; 
    color: #444; 
/*    color: #2538A4;*/ 
    font-size: 14px; 
/*    border: 5px solid #02ACF1;*/ 
    border: 5px solid #003366; 
    padding: 10px; 
} 
 
#menu {  text-align: center; 
/*font-size: 0.7em;*/ 
font-size: 1em; 
/*width: 820px;*/ 
width: 1170px; 
margin: 20px auto; 
position: relative; 
 
} 
#menu ul { list-style-type: none;} 
 
#menu ul li.nivel1 { float: left; 
/*width: 162px;*/ 
margin-right: 2px; 
position: relative; 
} 
#menu ul li { float: left;} 
 
#menu ul li a {display: block; 
text-decoration: none; 
color: #fff; 
background-color: #02ACF1; 
border: solid 1px #fff; 
padding: 8px; 
position: relative; 
} 
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #02ACF1; 
color: #000; 
position: relative; 
border-bottom: solid 1px #02ACF1; 
} 
#menu ul li a.nivel1 {display: block!important;display: none; 
} 
#menu ul li ul {display: none; 
} 
#menu ul li a:hover ul, #menu ul li:hover ul {display: block; 
position: absolute; 
/*width: 816px;*/ 
width: 100px; 
border: solid 1px #fff; 
border-top: none; 
background-color: #02ACF1; 
} 
#menu ul li ul li a {width: 160px; 
padding: 6px 0px 8px 0px; 
border: none; 
background-color: #02ACF1; 
} 
#menu ul li ul li a:hover { 
position: relative; 
text-decoration: underline; 
border-bottom: none; 
} 
table.falsa {border-collapse:collapse; 
border:0px; 
float: left; 
position: relative; 
} 
ul.uno {left: -0px;} 
ul.dos {left: -164px;} 
ul.tres {left: -328px;} 
/*ul.cuatro {left: -492px;}*/ 
ul.cinco {left: -656px;}  
   

Front HTML+CSS

Código PHP:

  <%@taglib prefix="t" uri="http://java.sun.com/jsp/jstl/core" %> 
<%@page contentType="text/html" pageEncoding="UTF-8"%> 
 
<t:if test="${sessionScope['sessionEmail']==null}"> 
    <% response.sendRedirect("login.jsp"); %> 
</t:if> 
 
<%@ page language="java" %> 
<%@page import = "java.util.LinkedList"%> 
<%@page import = "com.alestra.Bitacora.ConsultasBitacora"%> 
<%@page import = "com.alestra.Bitacora.Bean.BitacoraEspecialista"%> 
<!DOCTYPE html> 
<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<html> 
    <head> 
        <title>Busqueda de Registros en Bitacora</title> 
        <meta http-equiv="Content-Language" content="English" /> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
        <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> 
    </head> 
    <body> 
        <div id="wrap"> 
            <div id="header"> 
                <h1><a href="index.jsp">Operacion y Control TI</a></h1> 
                <h2>Bitacora de Eventos</h2> 
            </div> 
 
            <%@ include file="includeMenu.jsp" %> 
                 
            <div class="left"> 
                <div class="articles"> 
                    <h2>JSP Consulta MySQL - Busqueda Bitacora por Especialista</h2> 
                    <form method="get" action="bitacoraBusquedaEncontradaEspecialista.jsp"> 
                    <div class="fixedHeaderTable">                         
                        <table> 
                            <thead> 
                                <tr><th width="20%" hidden></th><th width="56%" hidden></th><th width="24%" hidden></th> 
                            </thead> 
                            <tbody> 
                                <tr> 
                                    <td>&nbsp;</td> 
                                    <td>&nbsp;</td> 
                                    <td>&nbsp;</td> 
                                </tr> 
                                <tr> 
                                    <td class="Gris"><div align="right">Especialista: </div></td> 
                                    <td class="Gris"><div align="left">&nbsp; 
                                        <select name="especialista_"> 
                                            <% 
                                             String tablaEspecialidad = "bde_especialista"; 
 
                                             LinkedList<BitacoraEspecialista> listaEspecialista = ConsultasBitacora.getBitacoraEspecialista(tablaEspecialidad); 
 
                                             { 
                                             for (int i=0;i<listaEspecialista.size();i++) 
                                             { %> 
                                                    <option value="<%=listaEspecialista.get(i).getId_especialista()%>"><%=listaEspecialista.get(i).getEspecialista()%> 
                                             <% 
                                                 } } 
                                             %> 
                                             </select></td> 
                                    <td class="Gris">&nbsp;</td> 
                                </tr> 
                                <tr> 
                                    <td>&nbsp;</td> 
                                    <td>&nbsp;</td> 
                                    <td>&nbsp;</td> 
                                </tr>                                     
                            </tbody> 
                        </table> 
                    </div> 
                    <br> 
                    <center> 
                        <input type="submit" value="Buscar Rep. x Esp."> 
                    </center> 
                    </form> 
                </div><!-- articles -->     
                <br><hr><br> 
                <center><b><a href="index.jsp">Volver a Index</a></b></center> 
                <br> 
            </div><!-- left --> 
            <div style="clear: both;"> </div> 
 
            <div id="footer"> 
            <a href="http:///"></a> -  
            <a href="http://#/">Operacion y Control TI. </a> 
            </div>                             
        </div> 
    </body> 
</html>  
   

[lobonegro6]

Aqui el menu:

Código PHP:

                  <div id="menu"> 
                <ul> 
                <li class="nivel1"><a href="index.jsp" class="nivel1">Inicio</a> 
                </li> 
                <li class="nivel1"><a href="bitacoraNuevoRegistro.jsp" class="nivel1">Insertar</a> 
                <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]--> 
 
                <!--[if lte IE 6]></td></tr></table></a><![endif]--> 
                </li> 
                <li class="nivel1"><a href="bitacoraListado.jsp" class="nivel1">Listado</a> 
                <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]--> 
 
                <!--[if lte IE 6]></td></tr></table></a><![endif]--> 
                </li> 
                <li class="nivel1"><a href="#" class="nivel1">Busqueda</a> 
                <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]--> 
                        <ul class="cuatro"> 
                                <li><a href="bitacoraBusqueda.jsp">Reporte</a></li> 
                                <li><a href="bitacoraBusquedaXEspecialista.jsp">Especialista</a></li> 
                                <li><a href="bitacoraBusquedaXGrupo.jsp">Grupo</a></li> 
                                <li><a href="bitacoraBusquedaXFecha.jsp">Dia</a></li> 
                                <li><a href="bitacoraBusquedaXFechas.jsp">Fechas</a></li>         
                        </ul> 
                <!--[if lte IE 6]></td></tr></table></a><![endif]--> 
                </li> 
                <li class="nivel1"><a href="bitacoraModificacion.jsp" class="nivel1">Modificar</a> 
                <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]--> 
                <!--[if lte IE 6]></td></tr></table></a><![endif]--> 
                </li> 
                <li class="nivel1"><a href="bitacoraBaja.jsp" class="nivel1">Borrar</a> 
                <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]--> 
                <!--[if lte IE 6]></td></tr></table></a><![endif]--> 
                </li> 
                </ul> 
                </div>  
   

[kseso?]

Añada a su #menu la propiedad z-index

Bonus:
Una página bicéfala no puede ser nada buena:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html>
<head>
<title>Busqueda de Registros en Bitacora</title>
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>

Lo siguiente con reservas:
Tampoco conviene poner nada (ni un comentario) antes del doctype.


Por cierto, bonitas tablas.

[lobonegro6]

Iniciado por kseso?

Añada a su #menu la propiedad z-index

Bonus:
Una página bicéfala no puede ser nada buena:


Lo siguiente con reservas:
Tampoco conviene poner nada (ni un comentario) antes del doctype.


Por cierto, bonitas tablas.

Hola gracias amigo, por ese error no lo habia visto, creo q se me paso. bueno acabo de introducirle al css el z-index, se lo puse de -1 y cuando regreso a la pagina ahora no me despliega nada. a q se debera?

[lobonegro6]

kseso?. gracias la solucion era poner z-index:1; gustazo saludarte.

[kseso?]

EDITO: tras su última respuesta:

Me alegra ver que encontró el punto.
Todo lo de abajo ya no aplica xD

se lo puse de -1 ...a q se debera?

La lógica, esa gran desconocida:
.- si antes se le veía (por debajo de otros elementos, pero se veía)
.- si modificó algo y sabe qué ha sido
.- si ahora ya no se ve
: : : :
ergo:................................. a q se debera?

http://www.sidar.org/recur/desdi/mcs...os/zindex.html
http://www.librosweb.es/referencia/css/z-index.html
http://www.w3.org/wiki/CSS/Properties/z-index