Tema: menu desplazado con css
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 31/10/2012, 22:57
el_loco90
 
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