Foros del Web » Creando para Internet » CSS »

menu desplazado con css

 Estas en el tema de menu desplazado con css en el foro de CSS en Foros del Web. amigos: hice un menu con submenus en css, tengo un poblema que cuando se abre los submenus quedan tapados por el contenido de la pagina, ...
  #1 (permalink)  
Antiguo 31/10/2012, 22:57
 
Fecha de Ingreso: julio-2012
Mensajes: 234
Antigüedad: 11 años, 9 meses
Puntos: 9
menu desplazado con css
amigos:
hice un menu con submenus en css, tengo un poblema que cuando se abre los submenus quedan tapados por el contenido de la pagina, es decir no abre los submenus por arriba de la pagina sino por abajo, pero lo mas curioso es que me lo hace a partir de tercer boton quedando asi funcionando correctamente el boton 1 y 2.

yo trabajo de esta forma
1- tengo una pagina para el menu solo barramenu.php
2- luego a cada paginas le hago la llamada al menu

les dejo el codigo

stylo
Código CSS: 
Ver original
  1. <style>
  2. #cssmenu ul,
  3. #cssmenu li,
  4. #cssmenu span,
  5. #cssmenu a {
  6.   margin: 0;
  7.   padding: 0;
  8.   position: relative;
  9. }
  10. #cssmenu {
  11.   height: 49px;
  12.   border-radius: 0px 0px 0 0;
  13.   -moz-border-radius: 0px 0px 0 0;
  14.   -webkit-border-radius: 0px 0px 0 0;
  15.   background: #2F612F;
  16.   background: -moz-linear-gradient(top, #32323a 0%, #2F612F 100%);
  17.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #2F612F));
  18.   background: -webkit-linear-gradient(top, #32323a 0%, #2F612F 100%);
  19.   background: -o-linear-gradient(top, #32323a 0%, #2F612F 100%);
  20.   background: -ms-linear-gradient(top, #32323a 0%, #2F612F 100%);
  21.   background: linear-gradient(to bottom, #32323a 0%, #2F612F 100%);
  22.   filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#2F612F', GradientType=0);
  23. }
  24. #cssmenu:after,
  25. #cssmenu ul:after {
  26.   content: '';
  27.   display: block;
  28.   clear: both;
  29. }
  30. #cssmenu a {
  31.   background: #2F612F;
  32.   background: -moz-linear-gradient(top, #32323a 0%, #2F612F 100%);
  33.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #2F612F));
  34.   background: -webkit-linear-gradient(top, #32323a 0%, #2F612F 100%);
  35.   background: -o-linear-gradient(top, #32323a 0%, #2F612F 100%);
  36.   background: -ms-linear-gradient(top, #32323a 0%, #2F612F 100%);
  37.   background: linear-gradient(to bottom, #32323a 0%, #2F612F 100%);
  38.   filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#2F612F', GradientType=0);
  39.   color: #ffffff;
  40.   display: inline-block;
  41.   font-family: Helvetica, Arial, Verdana, sans-serif;
  42.   font-size: 12px;
  43.   line-height: 49px;
  44.   padding: 0 10px;
  45.   text-decoration: none;
  46. }
  47. #cssmenu ul {
  48.   list-style: none;
  49. }
  50. #cssmenu > ul {
  51.   float: left;
  52. }
  53. #cssmenu > ul > li {
  54.   float: left;
  55. }
  56. #cssmenu > ul > li:hover > a {
  57.   background: #070707;
  58.   background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  59.   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  60.   background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  61.   background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  62.   background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  63.   background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  64.   filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
  65.   box-shadow: inset 0 0 3px #000000;
  66.   -moz-box-shadow: inset 0 0 3px #000000;
  67.   -webkit-box-shadow: inset 0 0 3px #000000;
  68. }
  69. #cssmenu .has-sub {
  70.   z-index: 1;
  71. }
  72. #cssmenu .has-sub:hover > ul {
  73.   display: block;
  74. }
  75. #cssmenu .has-sub ul {
  76.   display: none;
  77.   position: absolute;
  78.   width: 200px;
  79.   top: 100%;
  80.   left: 0;
  81. }
  82. #cssmenu .has-sub ul li {
  83.   *margin-bottom: -1px;
  84. }
  85. #cssmenu .has-sub ul li a {
  86.   background: #2F612F;
  87.   border-bottom: 1px dotted #6fc7ec;
  88.   filter: none;
  89.   font-size: 11px;
  90.   display: block;
  91.   line-height: 120%;
  92.   padding: 10px;
  93. }
  94. #cssmenu .has-sub ul li:hover a {
  95.   background: #0c7fb0;
  96. }
  97. #cssmenu .has-sub .has-sub:hover > ul {
  98.   display: block;
  99. }
  100. #cssmenu .has-sub .has-sub ul {
  101.   display: none;
  102.   position: absolute;
  103.   left: 100%;
  104.   top: 0;
  105. }
  106. #cssmenu .has-sub .has-sub ul li a {
  107.   background: #0c7fb0;
  108.   border-bottom: 1px dotted #6db2d0;
  109. }
  110. #cssmenu .has-sub .has-sub ul li a:hover {
  111.   background: #095c80;
  112. }
  113. </style>

html
Código HTML: 
Ver original
  1. <div id='cssmenu'>
  2. <ul>
  3.    <li class='has-sub '><a href='#'><span>a</span></a>
  4.       <ul>
  5.          <li class='has-sub '><a href=a.php'><span>a</span></a>
  6.          <li class='has-sub '><a href=a.php'><span>a</span></a>
  7.       </ul>
  8.    </li>
  9.    <li class='has-sub '><a href='#'><span>a</span></a>
  10.       <ul>
  11.          <li class='has-sub '><a href=a.php'><span>a</span></a>
  12.          <li class='has-sub '><a href=a.php'><span>a</span></a>
  13.          <li class='has-sub '><a href=a.php'><span>a</span></a>
  14.          <li class='has-sub '><a href=a.php'><span>a</span></a>
  15.          <li class='has-sub '><a href=a.php'><span>a</span></a>
  16.       </ul>
  17.    </li>
  18.    <li class='has-sub '><a href='#'><span>a</span></a>
  19.       <ul>
  20.          <li class='has-sub '><a href=a.php'><span>a</span></a>
  21.          <li class='has-sub '><a href=a.php'><span>a</span></a>
  22.       </ul>
  23.    </li>
  24.    <li class='has-sub '><a href='#'><span>a</span></a>
  25.       <ul>
  26.          <li class='has-sub '><a href=a.php'><span>a</span></a>
  27.          <li class='has-sub '><a href=a.php'><span>a</span></a>
  28.          <li class='has-sub '><a href=a.php'><span>a</span></a>
  29.       </ul>
  30.    </li>
  31.    <li class='has-sub '><a href='#'><span>a</span></a>
  32.       <ul>
  33.          <li class='has-sub '><a href=a.php'><span>a</span></a>
  34.          <li class='has-sub '><a href=a.php'><span>a</span></a>
  35.          <li class='has-sub '><a href=a.php'><span>a</span></a>
  36.          <li class='has-sub '><a href=a.php'><span>a</span></a>
  37.          <li class='has-sub '><a href=a.php'><span>a</span></a>
  38.          <li class='has-sub '><a href=a.php'><span>a</span></a>
  39.       </ul>
  40.    </li>
  41.    <li class='has-sub '><a href='#'><span>a</span></a>
  42.       <ul>
  43.          <li class='has-sub '><a href=a.php'><span>a</span></a>
  44.          <li class='has-sub '><a href=a.php'><span>a</span></a>
  45.          <li class='has-sub '><a href=a.php'><span>a</span></a>
  46.          <li class='has-sub '><a href=a.php'><span>a</span></a>
  47.          <li class='has-sub '><a href=a.php.php'><span>a</span></a>
  48.       </ul>
  49.    </li>
  50.    <li class='has-sub '><a href='#'><span>a</span></a>
  51.       <ul>
  52.          <li class='has-sub '><a href=a.php'><span>a</span></a>
  53.          <li class='has-sub '><a href=a.php'><span>a</span></a>
  54.       </ul>
  55.    </li>
  56.    <li class='has-sub '><a href='#'><span>a</span></a>
  57.       <ul>
  58.          <li class='has-sub '><a href=a.php'><span>a</span></a>
  59.          <li class='has-sub '><a href=a.php'><span>a</span></a>
  60.       </ul>
  61.    </li>
  62.    <li class='has-sub '><a href='#'><span>a</span></a>
  63.       <ul>
  64.          <li class='has-sub '><a href=a.php'><span>a</span></a>
  65.          <li class='has-sub '><a href=a.php'><span>a</span></a>
  66.          <li class='has-sub '><a href=a.php'><span>a</span></a>
  67.          <li class='has-sub '><a href=a.php'><span>a</span></a>
  68.       </ul>
  69.    </li>
  70.  </ul>
  71. </div>
gracias
Última edición por el_loco90; 31/10/2012 a las 23:06 Razón: modificaciones
  #2 (permalink)  
Antiguo 01/11/2012, 00:16
Avatar de chwc  
Fecha de Ingreso: julio-2008
Ubicación: Buenos Aires ! :D
Mensajes: 814
Antigüedad: 15 años, 8 meses
Puntos: 103
Respuesta: menu desplazado con css
ami me va todo correcto :

http://jsfiddle.net/RYNWE/

No será que el contenido esta antes de el menú, o que en el contenido, hay algo que tiene un z-index muy grande ??
agregale z-index:1000000 a #cssmenu para sobrepasar a los demas elementos
  #3 (permalink)  
Antiguo 01/11/2012, 01:13
 
Fecha de Ingreso: julio-2012
Mensajes: 234
Antigüedad: 11 años, 9 meses
Puntos: 9
Respuesta: menu desplazado con css
Cita:
Iniciado por chwc Ver Mensaje
ami me va todo correcto :

http://jsfiddle.net/RYNWE/

No será que el contenido esta antes de el menú, o que en el contenido, hay algo que tiene un z-index muy grande ??
agregale z-index:1000000 a #cssmenu para sobrepasar a los demas elementos
no amigo sigo con el mismo poblema pero entro a la pagina que me pasate y lo veo bien ¿que puede ser?
  #4 (permalink)  
Antiguo 01/11/2012, 01:51
 
Fecha de Ingreso: julio-2012
Mensajes: 234
Antigüedad: 11 años, 9 meses
Puntos: 9
Respuesta: menu desplazado con css
Cita:
Iniciado por chwc Ver Mensaje
ami me va todo correcto :

http://jsfiddle.net/RYNWE/

No será que el contenido esta antes de el menú, o que en el contenido, hay algo que tiene un z-index muy grande ??
agregale z-index:1000000 a #cssmenu para sobrepasar a los demas elementos
ya me anduvo puse z-index:1000000 en todos los stylos, te hago la ultima preguntita. sabes como puedo centralizar el menu mil gracias.
  #5 (permalink)  
Antiguo 01/11/2012, 17:34
 
Fecha de Ingreso: julio-2012
Mensajes: 234
Antigüedad: 11 años, 9 meses
Puntos: 9
Respuesta: menu desplazado con css
alguien sabe como lo puedo centralizar el menu
  #6 (permalink)  
Antiguo 02/11/2012, 10:50
(Desactivado)
  
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: menu desplazado con css
Aprendiendo HTML y CSS.

Para evitar que te dejen un mensaje diciendo que tu "ejemplo" se ve bien, poné uno bien hecho, que podamos probar y así no hay que adivinar nada.
Te va a servir para darte cuenta vos mismo cuándo y dónde tenés el error, solamente comparando tu demo que funciona con tu página que no.

Etiquetas: contenido, hover, html, fondo
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 06:23.