Foros del Web » Creando para Internet » CSS »

Ayuda con menu hecho en CSS

Estas en el tema de Ayuda con menu hecho en CSS en el foro de CSS en Foros del Web. Hola a todos!! Cómo van?? Pues resulta que estoy intentando hacer un menu desplegable en CSS, que al pasar el mouse por encima se despliguen ...
  #1 (permalink)  
Antiguo 16/09/2007, 14:58
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 11 años, 4 meses
Puntos: 70
De acuerdo Ayuda con menu hecho en CSS

Hola a todos!! Cómo van??

Pues resulta que estoy intentando hacer un menu desplegable en CSS, que al pasar el mouse por encima se despliguen las opciones que tiene el vinculo...

Tengo dos problemas, como cosa rara con los navegadores jejeje

1. En IE hace el efecto como lo quiero, es decir, pasan el mouse por encima y se despliegan las opciones... eso está bien, el problema es que me muestra los vinculos principales verticalmente y los necesito horizontales osea en linea, pero el maldito IE no me toma "display:"in-line:", Firefoz sí!!!

2. Firefox me toma el display:in-line, pero no me hace el efecto jejejeje

Alguien que me pueda hechar una mano??

Acá les dejo el html y la hoja de estilos:

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Probando menus verticales hechos solo con estilos::::</title>
<link rel="stylesheet" href="estilo3.css" type="text/css"></link>
</head>

<body>
    <div id="wrapper">
        <a href="#content" class="hiddenfromview" accesskey="X" title="skip to content">skip to content</a>                
        <div id="showcase">        
            <div id="info">            
                <h2>Menú desplegable vertical solo con CSS</h2>
                
                <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
                <dl class="one">
                    <dt><a href="#">Los pares</a></dt>
                    <dd><a href="probando2.php" title="The zero dollar ads page">Probando 2</a></dd>
                    <dd><a href="probando4.php" title="Wrapping text around images">Probando 4</a></dd>
                    <dd><a href="probando6.php" title="Styling forms">Probando 6</a></dd>                    
                </dl>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                
                <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
                <dl class="two">
                    <dt><a href="#">Los impares</a></dt>
                    <dd><a href="probando1.php" title="The zero dollar ads page">Probando 1</a></dd>
                    <dd><a href="probando3.php" title="Wrapping text around images">Probando 3</a></dd>
                    <dd><a href="probando5.php" title="Styling forms">Probando 5</a></dd>
                    <dd><a href="probando7.php" title="Styling forms">Probando 7</a></dd>
                </dl>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
               
                <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
                <dl class="three">
                    <dt><a href="#">Los primeros</a></dt>
                    <dd><a href="probando1.php" title="The zero dollar ads page">Probando 1</a></dd>
                    <dd><a href="probando2.php" title="Wrapping text around images">Probando 2</a></dd>
                    <dd><a href="probando3.php" title="Styling forms">Probando 3</a></dd>  
                </dl>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                
                <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
                <dl class="four">
                    <dt><a href="#">Los ultimos</a></dt>
                    <dd><a href="probando4.php" title="The zero dollar ads page">Probando 4</a></dd>
                    <dd><a href="probando5.php" title="Wrapping text around images">Probando 5</a></dd>
                    <dd><a href="probando6.php" title="Styling forms">Probando 6</a></dd>
                    <dd><a href="probando7.php" title="Styling forms">Probando 7</a></dd>
                </dl>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->                
			</div>
        </div>
    </div>
</body>
</html> 
La hoja de estilos:
Código:
@charset "utf-8";
/* CSS Document */

dl
{
	float:left;
	border:1px #000000 solid;
	display:inline;
	/*position:relative;*//*esta es obligatoria*/	
	/*z-index:100; */ /*para determinar el orden de apile*/
}

dd /*obligatoria!!! es la que oculta los sub vinculos*/
{
	display:none;
}

a:hover /*parece que es obligatoria para IE, por que en FF se puede quitar*/
{
	border:0;
}

a:hover dd/*esta tiene que ir así, sino no muestra los vinculos en IE*/
{
	display:block;
}
Agradezco de antemano cualquier ayuda...

Saludos!!
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
  #2 (permalink)  
Antiguo 16/09/2007, 19:45
Avatar de carmagedon  
Fecha de Ingreso: junio-2005
Ubicación: Argentina
Mensajes: 794
Antigüedad: 12 años, 5 meses
Puntos: 23
Re: Ayuda con menu hecho en CSS

Buenas!

Tengo muchas ganas de ayudarte, pero quisiera que le eches una mirada a estos enlaces:

http://www.baluart.net/articulo/24/m...javascript.php

http://www.anieto2k.com/2006/03/01/m...ables-con-css/

http://www.vectoralia.com/manual/htm...ntalescss.html

Creo que con esas tres páginas, tienes suficiente material.
Decí que estoy apurado como para mirar el código, pero échale una mirada a esas páginas, tal vez encuentras algo.

Un abrazo!
  #3 (permalink)  
Antiguo 16/09/2007, 23:15
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 11 años, 4 meses
Puntos: 70
Exclamación Re: Ayuda con menu hecho en CSS

Hola Carmagedon...

Gracias por los enlaces... los estuve revisando pero todos manejan javascript...

He intentado modificar mi hoja de estilos con lo poquito que sé y no logro cuadrar ninguno de los problemas...

Saludos
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
  #4 (permalink)  
Antiguo 17/09/2007, 23:23
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 11 años, 4 meses
Puntos: 70
Re: Ayuda con menu hecho en CSS



Sigo intentando aún, por un lado por el otro... y nada..

Encontré un menu desplegable solo en CSS, y quiero optimizarlo lo mas que pueda pero no logro cuadrarlo...
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
  #5 (permalink)  
Antiguo 18/09/2007, 10:53
 
Fecha de Ingreso: febrero-2002
Ubicación: Sabadell
Mensajes: 253
Antigüedad: 15 años, 9 meses
Puntos: 5
Re: Ayuda con menu hecho en CSS

Ey a ver si te sirve lo siguiente:

http://www.seoconsultants.com/css/menus/horizontal/

Yo pille eso y lo modifique un poco para arreglarlo a mi conveniencia y la verdad que ya lo uso por defecto en todas las webs donde tengo un menu horizontal ya sea con contenido dentro de ellas o sin el :)

Espero que te sirva, un saludo ;)
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 20:52.