Ayuda con menu hecho en CSS

Carxl · #1 (**permalink**) 16/09/2007, 13:58

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!!

carmagedon · #2 (**permalink**) 16/09/2007, 18:45

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!

Carxl · #3 (**permalink**) 16/09/2007, 22:15

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

Carxl · #4 (**permalink**) 17/09/2007, 22:23

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...

LoBo2024 · #5 (**permalink**) 18/09/2007, 09:53

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 ;)