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