Foros del Web » Creando para Internet » HTML »

No pasa por encima del contenido el Submenu.

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

Ya lo solucione

Etiquetas: contenido, css, encima
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:56.