Foros del Web » Creando para Internet » CSS »

problemas con el listado de menu horizontal

Estas en el tema de problemas con el listado de menu horizontal en el foro de CSS en Foros del Web. buenas. consegui una aplicacion de un menu css. lo adapte como esta en el boceto, pero el problema es que cuando le paso el hover ...
  #1 (permalink)  
Antiguo 21/02/2010, 09:12
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 16 años
Puntos: 7
Pregunta problemas con el listado de menu horizontal

buenas. consegui una aplicacion de un menu css. lo adapte como esta en el boceto, pero el problema es que cuando le paso el hover al menu y ver los items, se desaparecen, es decir, no se mantiene en su misma posicion.

a que se debe eso.

este es mi codigo.

Código PHP:
Ver original
  1. <ul id="navmenu-h">
  2.   <li><a href="index.php"><img src="imagenes/menu_home.jpg" border="0" /><br />
  3.     Home</a></li>
  4.   <li><a href="javascript:void(0);"><img src="imagenes/menu_nosotros.jpg" border="0" /><br />
  5.     Nosotros</a>
  6.     <ul>
  7.       <li><a href="historia.php">Historia</a></li>
  8.       <li><a href="mision_vision.php">Mision - Vision</a></li>
  9.       <li><a href="maquinarias.php">CP - Maq</a></li>
  10.     </ul>
  11.   </li>
  12.   <li><a href="javascript:void(0);"><img src="imagenes/menu_servicios.jpg" border="0" /><br />
  13.     Servicios</a>
  14.     <?php
  15.         $sql_tipo_servicios  = "SELECT * FROM teirsac_tipos_servicios";
  16.         $rpta_tipo_servicios = $cn->query($sql_tipo_servicios) or die(mysql_error());
  17.   ?>
  18.     <ul>
  19.       <?php
  20.         while($row_serv = $cn->fetch_array($rpta_tipo_servicios)){
  21.   ?>
  22.       <li><a href="servicios.php?idservicio=<?php echo $row_serv['idtiposervicio']; ?>"><?php echo $row_serv['nombre_servicio']; ?></a></li>
  23.       <?php
  24.         }
  25.   ?>
  26.     </ul>
  27.   </li>
  28.   <li><a href="clientes.php"><img src="imagenes/menu_clientes.jpg" border="0" /><br />
  29.     Clientes</a></li>
  30.   <li><a href="proveedores.php"><img src="imagenes/menu_proveedores.jpg" border="0" /><br />
  31.     Proveedores</a></li>
  32.   <li><a href="noticias.php"><img src="imagenes/menu_noticias.jpg" border="0" /><br />
  33.     Noticias</a></li>
  34.   <li><a href="contactenos.php"><img src="imagenes/menu_contactenos.jpg" border="0" /><br />
  35.     Contacto</a></li>
  36. </ul>

el css

Código CSS:
Ver original
  1. /* Root = Horizontal, Secondary = Vertical */
  2. ul#navmenu-h {
  3.     margin: 0;
  4.     border: 0 none;
  5.     width: 580px; /*For KHTML*/
  6.     list-style: none;
  7.     height: 15px;
  8.     z-index:5;
  9.     padding-top: 25px;
  10.     padding-right: 0px;
  11.     padding-bottom: 25px;
  12.     padding-left: 0px;
  13. }
  14. ul#navmenu-h li {
  15.     margin: 0;
  16.     border: 0 none;
  17.     padding: 0;
  18.     float: left; /*For Gecko*/
  19.     display: block; /*reemplaze el display: inline por display: block.*/
  20.     list-style: none;
  21.     position: relative;
  22.     height: 15px;
  23. }
  24. ul#navmenu-h ul {
  25.     margin: 0;
  26.     border: 0 none;
  27.     padding: 0;
  28.     width: 125px;
  29.     height:14px;
  30.     list-style: none;
  31.     display: none;
  32.     position: absolute;
  33.     top: 60px;
  34.     left: 0;
  35. }
  36. ul#navmenu-h ul:after /*From IE 7 lack of compliance*/ {
  37.     clear: both;
  38.     display: block;
  39.     font: 1px/0px serif;
  40. /*  content: "."; */
  41.     height: 0;
  42.     visibility: hidden;
  43. }
  44. ul#navmenu-h ul li {
  45.     font-family:Arial, Helvetica, sans-serif;
  46.     font-size:10px;
  47.     border: 1px solid #FFF;
  48.     border-right-color: #CCC;
  49.     border-bottom-color: #CCC;
  50.     width: 125px;
  51.     float: left; /*For IE 7 lack of compliance*/
  52.     display: block !important;
  53.     display: inline; /*For IE*/
  54. }
  55. /* Root Menu */
  56. ul#navmenu-h a {
  57.     /*  border: 1px solid #FFF;*/
  58.     border-right-color: #A2A2A2;
  59.     border-bottom-color: #A2A2A2;
  60.     padding: 0px 16px;
  61.     float: none !important; /*For Opera*/
  62.     float: left; /*For IE*/
  63.     display: block;
  64.     background:none;
  65.     color: #CCCCCC;
  66.     font-family:Arial, Helvetica, sans-serif;
  67.     font-size:12px;
  68.     text-decoration: none;
  69.     height: auto !important;
  70.     height: 1&#37;; /*For IE*/
  71. }

edito. ya corregi el error. reemplaze el display: inline por display: block.

saludos.

Última edición por esaenz22; 21/02/2010 a las 15:40 Razón: correccion.

Etiquetas: horizontal, listado
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 17:18.