Hola a todos. tengo un buen problema con menu desplegable, queda perfecto en todos los navegadores tambien en el IE 6 pero falla en IE 7 Y IE 8, en ellos se visualiza bien el menu se despliega bien pero no puedo pulsar en los submenus o sea no se fijan.
Dejo los codigos:
CSS:
#navegacion {background-color:white ; height:40px ; border-bottom:gray 2px solid ; border-right: black 1px solid ; border-left:black 1px solid }
#navegacion li {float:left ; list-style:none ; margin:0px 0px 0px 0px }
#navegacion ul { list-style-type: none;margin: 0px 0px 0px 114px}
#navegacion ul li.nivel1 { float: left;
width: 132px;
margin-right: 2px;
}
#navegacion ul li a {display: block;
text-decoration: none;
color: #fff;
background-color:#2F4F4F;
border: solid 1px #fff;
padding: 8px;
position: relative;
}
#navegacion ul li:hover {position: relative;
}
#navegacion ul li a:hover, #navegacion ul li:hover a.nivel1 {background-color: black;
color: red;
position: relative;
}
#navegacion ul li a.nivel1 {display: block!important;display: none;
position: relative;
}
#navegacion ul li ul {display: none;
}
#navegacion ul li a:hover ul, #navegacion ul li:hover ul {display: block;
position:absolute;
}
#navegacion ul li ul li a {width: 130px;
padding: 6px 0px 8px 0px;
border-top-color: #000;
}
#navegacion ul li ul li a:hover {border-top-color: #000;
position:relative;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position:relative;
}
HTML:
<div id="navegacion">
<ul>
<li class="nivel1"><a href="fiestas/fiestas1.html" class="nivel1">Fiestas</a>
<!--[if IE ]><a href="fiestas/fiestas1.html" class="nivel1IE">Fiestas<table class="falsa"><tr><td><![endif]-->
<ul>
<li><a href="#">Fiestas 2</a></li>
<li><a href="#">Fiestas 3</a></li>
</ul>
<!--[if IE ]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="ferias/ferias1.html" class="nivel1">Ferias</a>
<!--[if IE ]><a href="ferias/ferias1.html" class="nivel1IE">Ferias<table class="falsa"><tr><td><![endif]-->
<ul>
<li><a href="">Ferias 2</a></li>
<li><a href="">Ferias 3</a></li>
</ul>
<!--[if IE ]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="teatro/teatro1.html" class="nivel1">Teatro</a>
<!--[if IE ]><a href="teatro/teatro1.html" class="nivel1IE">Teatro<table class="falsa"><tr><td><![endif]-->
<ul>
<li><a href="#">Teatro 2</a></li>
<li><a href="#">Teatro 3</a></li>
</ul>
<!--[if IE ]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="musica/musica1.html" class="nivel1">Musica</a>
<!--[if IE]><a href="musica/musica1.html" class="nivel1IE">Musica<table class="falsa"><tr><td><![endif]-->
<ul>
<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 IE ]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="contraportada/contraportada.html" class="nivel1">Contraportada</a>
<!--[if IE]><a href="contraportada/contraportada.html" class="nivel1IE">Contraportada<table class="falsa"><tr><td><![endif]-->
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
Agradeceria cualquier ayuda para resolver el problema.