No pasa por encima del contenido el Submenu.

jgames88 · #1 (**permalink**) 27/11/2011, 10:52

No encuentro la solución a este problema, estoy practicando la creación de los submenu, no hay problema en el asunto de que se muestre ni nada de ello, el gran detalle o problema es que cuando muestro el submenu, el mismo me mueve todo o me desplaza todo hacia abajo, es decir me rueda la pagina no le pasa por encima al contenido, he intentado con los z-index relative absolute y nada que funciona, aqui les dejo el codigo que estoy usando.

el html es :

Código HTML:

Ver original<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link href="p.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="funciones15.js"></script>
</head>
 
<body>
    <center> 
        <div id="menu">
            <ul id="ulmenu">
                <li class="limenu">
                    <a id="probando" class="amenu" href="probando">
                        Probando
                    </a>
                </li>
                <li class="limenu">
                    <a  class="amenu" href="probando">
                        Viendo
                    </a>
                </li>
            </ul>
        </div>
        <div id="submenu">
        Probando
        </div>
        <div id="content">
            Colocar aquí el contenido de la nueva etiqueta Div
        </div>
    </center>
</body>
</html>

El CSS que uso:

Código CSS:

Ver original.amenu, #ulmenu {
    list-style: none;
    
    text-decoration: none;
}
 
#menu {
    width: 900px;
    
    text-align:center;
    
    margin-top: 80px;
    
    z-index: 0;
    
    position:relative;
}
 
.limenu {
    float:center;
    
    display:inline;
}
 
.amenu {
    background-color:#009;
    
    padding: 30px;
}
 
.amenu:hover {
    background-color:#FC0;
}
 
#submenu {
    margin-top: 30px;
    
    margin-left: -47px;
    
    display: none;
    
    padding: 0px;
    
    background-color: #09C;
    
    width: 140px;
    
    position:relative;
    
    z-index:1;
}
 
.asubmenu {
    background-color: #09C;
    
    padding: 0px;
    
    display:block;
}
 
.asubmenu, #ulsubmenu {
    list-style: none;
    
    text-decoration: none;
}
 
.submenuspan {
    display: block;
    
    padding: 15px;  
}
 
#content {
    z-index: -1;
    
    position:relative;
}

El JQuery que utilizo para el funciomaniento del submenu:

Código Javascript:

Ver originalvar file;
 
file = $(document);
 
file.ready (StartEvents);
 
function StartEvents () {
    var button, secondbutton;
    
    button = $("#probando");
    
    secondbutton = $("#submenu");
    
    button.mouseenter (MostrarSubMenuProbando);
    
    if ( button.mouseout () == true ) {
        alert ("probando");
    }
    
    secondbutton.mouseenter (MostrarSubMenuProbando);
}
 
function MostrarSubMenuProbando () {
    var submenu;
    
    submenu = $("#submenu");
    
    submenu.slideDown ();
}
 
function EsconderSubMenuProbando () {
    var submenu;
    
    submenu = $("#submenu");
    
    submenu.slideUp ();
}

Bueno espero que puedan ayudarme, gracias de ante mano.

jgames88 · #2 (**permalink**) 27/11/2011, 12:50

Ya lo solucione