Tema: No pasa por encima del contenido el Submenu.
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 27/11/2011, 10:52
jgames88
 
Fecha de Ingreso: enero-2010
Mensajes: 127
Antigüedad: 14 años, 10 meses
Puntos: 2
No pasa por encima del contenido el Submenu.
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
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Documento sin título</title>
  5. <link href="p.css" rel="stylesheet" type="text/css" />
  6. <script type="text/javascript" src="jquery.js"></script>
  7. <script type="text/javascript" src="funciones15.js"></script>
  8. </head>
  9.  
  10. <body>
  11.     <center> 
  12.         <div id="menu">
  13.             <ul id="ulmenu">
  14.                 <li class="limenu">
  15.                     <a id="probando" class="amenu" href="probando">
  16.                         Probando
  17.                     </a>
  18.                 </li>
  19.                 <li class="limenu">
  20.                     <a  class="amenu" href="probando">
  21.                         Viendo
  22.                     </a>
  23.                 </li>
  24.             </ul>
  25.         </div>
  26.         <div id="submenu">
  27.         Probando
  28.         </div>
  29.         <div id="content">
  30.             Colocar aquí el contenido de la nueva etiqueta Div
  31.         </div>
  32.     </center>
  33. </body>
  34. </html>

El CSS que uso:

Código CSS: 
Ver original
  1. .amenu, #ulmenu {
  2.     list-style: none;
  3.     
  4.     text-decoration: none;
  5. }
  6.  
  7. #menu {
  8.     width: 900px;
  9.     
  10.     text-align:center;
  11.     
  12.     margin-top: 80px;
  13.     
  14.     z-index: 0;
  15.     
  16.     position:relative;
  17. }
  18.  
  19. .limenu {
  20.     float:center;
  21.     
  22.     display:inline;
  23. }
  24.  
  25. .amenu {
  26.     background-color:#009;
  27.     
  28.     padding: 30px;
  29. }
  30.  
  31. .amenu:hover {
  32.     background-color:#FC0;
  33. }
  34.  
  35. #submenu {
  36.     margin-top: 30px;
  37.     
  38.     margin-left: -47px;
  39.     
  40.     display: none;
  41.     
  42.     padding: 0px;
  43.     
  44.     background-color: #09C;
  45.     
  46.     width: 140px;
  47.     
  48.     position:relative;
  49.     
  50.     z-index:1;
  51. }
  52.  
  53. .asubmenu {
  54.     background-color: #09C;
  55.     
  56.     padding: 0px;
  57.     
  58.     display:block;
  59. }
  60.  
  61. .asubmenu, #ulsubmenu {
  62.     list-style: none;
  63.     
  64.     text-decoration: none;
  65. }
  66.  
  67. .submenuspan {
  68.     display: block;
  69.     
  70.     padding: 15px;  
  71. }
  72.  
  73. #content {
  74.     z-index: -1;
  75.     
  76.     position:relative;
  77. }

El JQuery que utilizo para el funciomaniento del submenu:

Código Javascript: 
Ver original
  1. var file;
  2.  
  3. file = $(document);
  4.  
  5. file.ready (StartEvents);
  6.  
  7. function StartEvents () {
  8.     var button, secondbutton;
  9.     
  10.     button = $("#probando");
  11.     
  12.     secondbutton = $("#submenu");
  13.     
  14.     button.mouseenter (MostrarSubMenuProbando);
  15.     
  16.     if ( button.mouseout () == true ) {
  17.         alert ("probando");
  18.     }
  19.     
  20.     secondbutton.mouseenter (MostrarSubMenuProbando);
  21. }
  22.  
  23. function MostrarSubMenuProbando () {
  24.     var submenu;
  25.     
  26.     submenu = $("#submenu");
  27.     
  28.     submenu.slideDown ();
  29. }
  30.  
  31. function EsconderSubMenuProbando () {
  32.     var submenu;
  33.     
  34.     submenu = $("#submenu");
  35.     
  36.     submenu.slideUp ();
  37. }

Bueno espero que puedan ayudarme, gracias de ante mano.