05/02/2012, 09:12
|
| | | Fecha de Ingreso: julio-2006
Mensajes: 96
Antigüedad: 18 años, 4 meses Puntos: 2 | |
| Problema con css y xhtml
Hola! Estoy diseñando un panel de control en css y XHTML , tengo un menú hecho en CSS que es desplegable pero tengo el siguiente problema de la imagen. 
Es decir el menu se me oculta por debajo del texto , intente con las propiedades z-index pero no me dio resultado , el codigo de mi css y xhtml es el siguiente:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ainux Servicios Informáticos</title>
<script type="text/javascript">
function popup(pagina,titulo,ancho,alto){
window.open(pagina,'','status=no,toolbar=no,scrollbars=no,menubar=no,fullscreen=no,resizable=no,width=504,height=232px,resize=no');
}
</script>
<style type="text/css">
.transparente {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
a,link,visited,href{
text-decoration:none;
}
body{
background:#F5f5f5;
margin:0;
padding:0;
}
#menu_superior{
width:100%;
height:1.65em;
background-color:#333333;
float:left;
}
#menu{
margin:0;
display:block;
float:left;
}
#menu ul{
margin:0;
padding:0;
}
#menu li{
display:inline;
float:left;
width:6em;
height:auto;
text-decoration:none;
list-style:none;
font-size:0.8em;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
padding:5px;
display:block;
}
#menu li a{
color:#F9f9f9;
}
#menu li:hover{
background:#424242;
}
ul#menu ul {
background:#333333;
display:none;
z-index:2;
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
margin:0;
text-align:center;
}
ul#menu li ul li{
margin-top:1px;
width:91%;
}
ul#menu li:hover ul{
display:block;
}
#menu_cuenta{
float:right;
height:1.65em;
width:auto;
margin-right:3%;
padding-top:5px;
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:0.8em;
margin-left:1em;
}
.link{
color:#FCFCFC;
text-decoration:none;
margin-left:0.8em;
}
#contenido{
margin:0;
padding:0;
margin-left:6%;
margin-right:6%;
Z-INDEX:1;
BACKGROUND:#FFFFFF;
width:88%;
height:auto;
min-height:7em;
border-left:1px solid #E6E6E6;
border-right:1px solid #E6E6E6;
}
h1{
font-family:Arial, Helvetica, sans-serif;
color:#CBCBCB;
padding:0;
margin:0;
}
hr{
margin:0;
padding:0;
border:2px solid #CBCBCB;
}
.html_contenido{
padding-top:3%;
margin-top:0%;
margin-left:2%;
margin-right:2%;
}
.pie{
padding-top:0.4em;
border-bottom:0.4em solid #FFFFFF;
text-align:center;
font-size:0.8em;
color:#666666;
}
.titulo_seccion{
margin-top:1%;
font-family:Arial, Helvetica, sans-serif;
font-size:2em;
color:#CBCBCB;
}
.tabla_contenido{
width:100%;
height:auto;
margin-top:0.4em;
margin-bottom:0.4em;
}
.tabla_contenido th{
background:#4A4A4A;
border:1px solid #FCFCFC;
font-size:0.8em;
color:#F5F5F5;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
}
.tabla_contenido td{
border:1px solid #FCFCFC;
background:#F5F5F5;
font-family:Arial, Helvetica, sans-serif;
font-size:0.8em;
text-align:center;
}
.tabla_contenido td hover{
background:#F6F6F6;
}
#acciones_seccion{
margin-top:1%;
float:right;
font-family:Arial, Helvetica, sans-serif;
font-size:0.49em;
color:#666666;
}
#acciones_seccion a{
background:#F5F5F5;
margin-left:0.4em;
color:#5E5E5E;
-moz-border-radius: 5px; /* Firefox */
-webkit-border-radius: 5px; /* Safari */
}
#acciones_seccion a:hover{
background:#444444;
color:#FCFCFC;
}
.acciones{
color:#CBCBCB;
font-weight:BOLD;
}
.nombre_usuario{
-moz-border-radius: 5px; /* Firefox */
-webkit-border-radius: 5px; /* Safari */
background:#5e5e5e;
}
</style>
</head>
<body>
<div id="menu_superior">
<ul id="menu">
<li><a href="http://localhost/ainux/index.php/usuarios">Usuarios</a>
<ul>
<li><a href="http://localhost/ainux/index.php/usuarios_adm/listar">Listar Usuarios</a></li>
<li><a href="http://localhost/ainux/index.php/usuarios_adm/nuevo">Nuevo Usuario</a></li>
</ul>
<li><a href="http://localhost/ainux/index.php/mensajes">Mensajes</a>
<ul>
<li><a href="http://localhost/ainux/index.php/ver">ver</a></li>
</ul>
</ul>
<div id="menu_cuenta"><b><span class='nombre_usuario'>@demo</span></b>
<a href="#" class='link' onclick="javascript:popup('http://localhost/ainux/index.php/cuenta/datosCuenta','Cuenta','','')">Cuenta</a>
<a href="http://localhost/ainux/index.php/login/salir" class='link'>Cerrar Sesión</a></div>
</div>
<div id="contenido">
<div class="html_contenido">
<div class='titulo_seccion'>Usuarios<div id='acciones_seccion'><span class='acciones'>acciones:</span><a href="#" onclick="javascript:popup('http://localhost/ainux/index.php/usuarios_adm/nuevo','Nuevo','')">Crear</a><a href="#">Buscar</a></div></div>
<hr>
<table class='tabla_contenido'>
<thead>
<tr>
<th>ID</th><th>Nombre</th><th>Contraseña</th><th>Nivel</th><th>Estado</th><th>Clave Recuperación</th><th>Acciones</th></tr>
</thead>
<tbody>
<tr>
<td>7</td><td>jonatanlc</td><td>a681723522</td><td>1</td><td>1</td><td></td></tr>
<tr>
<td>8</td><td>demo</td><td>demodemo</td><td>8</td><td>0</td><td></td></tr>
</tbody>
</table><hr>
<div class='pie'>Ainux Servicios Informáticos | www.ainux.com.ar | [email protected]</div>
</div>
</div>
</body>
</html>
Espero que me puedan dar una mano ya que estoy desconcertado.
Muchas gracias! Saludos |