Holas!
Resuelta que he diseñado un menu en css puro, sin utilizar javascript (como lo tenia antes) y ahora resulta que funciona perfectamente en Firefox pero no hay manera que vaya en el maldito explorer.
Los botones me los muestra igual pero cuando quiero desplegar, desaparece el menu. Es decir, que no logo que los desplegables vayan bien en IE.
Me podéis decir que hago mal?
Pongo el código del menu y del css completo por si alguien lo quiere aprovechar. Esta bonito pero solo me funciona en el Firefox. Además he comentado parte del código.
menu.php Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Menu desplegable CSS</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="menu.css" type="text/css" />
</head>
<body>
<!-- Begin CSS Horizontal Popout Menu -->
<div id="menu">
<ul>
<li><h2>Inicio</h2></li>
</ul>
<ul>
<li><h2 class="desplega">Boton 2</h2>
<ul>
<li><a href="#">Opcion 1</a></li>
<li><a href="#">Opcion 2</a></li>
<li><a href="#">Opcion 3</a></li>
<li><a href="#">Opcion 4</a></li>
<li><a href="#">Opcion 5</a></li>
<li><a href="#">Opcion 6</a></li>
<li><a href="#">Opcion 7</a></li>
</ul>
</li>
</ul>
<ul>
<li><h2 class="desplega">Boton 3</h2>
<ul>
<li><a href="#">Opcion 1</a></li>
<li><a href="#">Opcion 2</a></li>
<li><a href="#">Opcion 3</a></li>
<li><a href="#">Opcion 4</a></li>
<li><a href="#">Opcion 5</a></li>
</ul>
</li>
</ul>
<ul>
<li><h2 class="desplega">Boton 4</h2>
<ul>
<li><a href="#">Opcion 1</a></li>
<li><a href="#">Opcion 2</a></li>
<li><a href="#" class="x">Opcion 3</a>
<ul>
<li><a href="#">Opcion 3.1</a></li>
<li><a href="#">Opcion 3.2</a></li>
</ul>
<li><a href="#" class="x">Opcion 4</a>
<ul>
<li><a href="#">Opcion 4.1</a></li>
<li><a href="#">Opcion 4.2</a></li>
<li><a href="#">Opcion 4.3</a></li>
<li><a href="#">Opcion 4.4</a></li>
<li><a href="#">Opcion 4.5</a></li>
</ul>
<li><a href="#">Opcion 5</a></li>
<li><a href="#">Opcion 6</a></li>
<li><a href="#">Opcion 7</a></li>
</ul>
</li>
</ul>
<ul>
<li><h2 class="desplega">Boton 5</h2>
<ul>
<li><a href="#">Opcion 1</a></li>
<li><a href="#">Opcion 2</a></li>
<li><a href="#">Opcion 3</a></li>
</ul>
</li>
</ul>
<ul>
<li><h2 class="desplega">Boton 6</h2>
<ul>
<li><a href="#">Opcion 1</a></li>
<li><a href="#">Opcion 2</a></li>
</ul>
</li>
</ul>
<ul>
<li><h2 class="desplega">Boton 7</h2>
<ul>
<li><a href="#">Opcion 1</a></li>
<li><a href="#">Opcion 2</a></li>
</ul>
</li>
</ul>
<ul>
<li><h2 class="desplega">Boton 8</h2>
<ul>
<li><a href="#" id="tcss">Opcion 1</a></li>
<li><a href="#" id="tart">Opcion 2</a></li>
<li><a href="#" id="tart">Opcion 3</a></li>
<li><a href="#" id="tart">Opcion 4</a></li>
<li><a href="#" id="tart">Opcion 5</a></li>
<li><a href="#" id="tart">Opcion 6</a></li>
<li><a href="#" id="tart">Opcion 7</a></li>
</ul>
</li>
</ul>
<ul>
<li><h2 class="desplega">Boton 9</h2>
<ul>
<li><a href="#" id="tcss">Opcion 1</a></li>
<li><a href="#" id="tart">Opcion 2</a></li>
<li><a href="#" id="tart">Opcion 3</a></li>
<li><a href="#" id="tart">Opcion 4</a></li>
<li><a href="#" id="tart">Opcion 5</a></li>
</ul>
</li>
</ul>
</div>
<!-- End CSS Horizontal Popout Menu -->
</body>
</html>
Código CSS menu.css
Código:
*{margin:0;padding:0;border:none;}
body{margin:0.5em;font-family:verdana,tahoma,arial,sans-serif;}
/* Empieza CSS Popout Menu */
/* Capa que envuelve a todo el menu */
#menu{
width:100%;
float:left;
background:#69CFDB;
}
#menu a{
display:block;
/*border-width:1px;
border-style:solid;
border-color:#ccc #888 #555 #bbb;*/
white-space:nowrap;
margin:0;
padding:0 5px;
font-size:12px;
color:#FFF;
}
#menu h2{
display:block;
/*border-width:1px;
border-style:solid;
border-color:#ccc #888 #555 #bbb;*/
white-space:nowrap;
margin:0;
padding:0 5px;
font-size:12px;
}
/* Color 1r nivel normal */
#menu h2{color:#fff;}
/* Color 1r nivel encima*/
div#menu h2:hover{color:#000;}
/* Si es desplegable el 1r nivel sale una flecha */
#menu h2.desplega{
background:#69CFDB url(arrow_down.gif) no-repeat right 5px;
padding-right:15px;
}
/* Color de los enlaces 2n nivel estado normal */
#menu a, #menu a:visited{
background-color: #a2e3e7;
color: #FFF;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
padding: 6px 8px;
text-decoration:none;
}
/* Color de los enlaces 2n nivel cuando se posiciona encima */
#menu a:hover{
/*color:#fff;
background:#ccc;*/
color:#000;
background:#69CFDB;
}
/* Color de los enlaces 2n nivel cuando se hace clic */
#menu a:active{
color:#FFF;
background:#ccc;
}
#menu ul{
list-style:none;
margin:0;
padding:5px;
float:left;
}
#menu li{
position:relative;
}
/* Tamaño del menu desplegable */
#menu li ul{
border: solid 1px #69cfdb;
padding: 4px 0px 0px 0px;
width:150px;
}
#menu ul ul{
position:absolute;
z-index:500;
top:auto;
display:none;
}
#menu ul ul ul{
top:0;
left:100%;
padding-top:0px;
}
/* Empieza hover selectors */
div#menu li:hover{cursor:pointer;z-index:100;}
div#menu li:hover ul ul,
div#menu li li:hover ul ul,
div#menu li li li:hover ul ul,
div#menu li li li li:hover ul ul
{display:none;}
div#menu li:hover ul,
div#menu li li:hover ul,
div#menu li li li:hover ul,
div#menu li li li li:hover ul
{display:block;}
/*Acaba hover selectors */
/* Estilo Desplegable (subcategorias)*/
/* Color de los enlaces normal */
#menu a.x, #menu a.x:visited{
color:#000;
border-left:3px solid #353535;
background:#a2e3e7 url(arrow_right2.gif) no-repeat right 8px;
}
/* Color de los enlaces encima raton */
#menu a.x:hover{
color:#FFF;
background:#69CFDB url(arrow_right2.gif) no-repeat right 8px;
}
/* Color de los enlaces cuando se hace clic */
#menu a.x:active{
color:#FFF;
background:#ccc;
}
/* Final CSS Popout Menu */
Gracias de antemano