Hola y muchisimas gracias de nuevo, Sanxuan. Nada amigo, al aplicar los ajustes que hicistes a la pagina el resultado fue distinto, no se desplego el submenu, aunque lo probe en una carpeta aparte en mi editor html y funciona a la perfecion. Uff me estoy desesperando.
Deciros que aunque creo que lo tengo bastante avanzado llevo tan solo un mes en esto del HTML y el diseño y creación de paginas web y aun estoy muy verde.
Originalmente el problema que tenia con el menu desplegable era que este no se veia en IE 7 y IE 8, lo quise arreglar aplicando los comentarios condicionales para todas las versiones de IE;<!--[if IE]></td></tr></table></a><![endif]-->
Haciendo algunas pruebas me he dado cuenta que los condicionales para IE del codigo;<!--[if lte IE 6]></td></tr></table></a><![endif]--> solo valen para IE 6 y al querer aplicarselo a IE 7 y IE 8 el menu desplegable se deja ver en estos pero
entonces surge el problema de que al querer acceder al submenu este se oculta.
Asi que y teniendo en cuenta esto, mi problema principal esta en ¿porque con este codigo que se ve en todos los navegadores incluido IE6 y que al copiarlo a mi pagina no se ve nada en la capa navegacion con IE7 y IE8.? Parece como si estas versiones de IE no me reconocieran el codigo del menu desplegable en el css. Decir que tengo una hoja de estilo para IE y otra para los demas navegadores y que estan bien enlazadas.
Dejo la direccion de la pagina de prueba para ver el problema y acceder al codigo fuente:
http://papis.onlinewebshop.net/
Codigo menu desplegable reformado:
CSS:
#navegacion {
background-color:white ;
height:40px ;
border-bottom:gray 2px solid ;
border-right: black 1px solid ;
border-left:black 1px solid }
#menu {text-align: center;
font-size: 0.7em;
width: 820px;
margin: 0px auto;
}
#menu ul {list-style-type: none;
}
#menu ul li {width: 162px;
}
#menu ul li.nivel1 { float: left;
margin-right: 1px;
}
#menu ul li a {display: block;
text-decoration: none;
color: #fff;
background-color: #399;
border: solid 1px #fff;
padding: 8px;
position: relative;
}
#menu ul li a.nivel2, #menu ul li a.nivel2ie {color: #000;
}
#menu ul li a.nivel1, #menu ul li a.nivel2 {display: block!important;display: none;
position: relative;
}
#menu ul li:hover {position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;
color: #000;
position: relative;
}
#menu ul li ul {display: none;
}
#menu ul li:hover ul.nivel2, #menu ul li a:hover ul.nivel2{display: block;
position: absolute;left: 0px;
}
#menu ul li ul li a {width: 160px;
padding: 8px 0px;
border-top-color: transparent;
}
#menu ul li ul li a:hover {border-top-color: #000;
position: relative;
}
#menu ul li ul li ul li a.primera {border-top-color: #fff;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
HTML:
<div id="navegacion">
<div id="menu">
<ul>
<li class="nivel1"><a href="fiestas/fiestas.html" class="nivel1">Fiestas</a>
<!--[if lte IE 6]><a href="fiestas/fiestas.html" class="nivel1ie">Fiestas<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li><a href="#">Fiestas 2</a></li>
<li><a href="#">Fiestas 3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="ferias/ferias.html" class="nivel1">Ferias</a>
<!--[if lte IE 6 ]><a href="ferias/ferias.html" class="nivel1ie">Ferias<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li><a href="#">Ferias 2</a></li>
<li><a href="#">Ferias 3</a></li>
<!--[if lte 6 IE]><table class="falsa"><tr><td><![endif]-->
<!--[if lte 6 IE]></td></tr></table></a><![endif]-->
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="teatro/teatro.html" class="nivel1">Teatro</a>
<!--[if lte IE 6]><a href="teatro/teatro.html" class="nivel1ie">Teatro<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li><a href="#">Teatro 2</a></li>
<li><a href="#">Teatro 3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="musica/musica.html" class="nivel1">Musica</a>
<!--[if lte IE 6]><a href="musica/musica.html" class="nivel1ie">Musica<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li><a href="musica/musica2.html">Musica 2</a></li>
<li><a href="#">Musica 3</a></li>
<li><a href="#">Musica 4</a></li>
<li><a href="#">Musica 5</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Contraportada</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Contraportada<table class="falsa"><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</div>