Foros del Web - Ver Mensaje Individual - Problemas con navegadores y menus desplegables

pandols52 · #1 (**permalink**) 01/07/2014, 03:51

Hola amigos,
Estoy empezando con el diseño en css y he creado un menú desplegable usando la utilidad css3. El problema es que salvo en Chrome, don de ve perfectamente y se depliegan las persianas), no hay forma de verlo bien en Explorer, y tampoco se ve correctamente en las vistas "diseño" de Dreanweaver o FrantPage. La verdad es que ya no se que hacer con todas las combinaciones que he hecho. Agradecería cualquier ayuda. Os dejo el codigo.
Agradezco cualquier respuesta.

Código:
<html>

<head>
<link rel="stylesheet" type="text/css" href="general.css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>css3menu.com</title>

<link rel="stylesheet" href="Menu desplegable_files/css3menu1/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Izquierda Unida - Velilla de San Antonio (Madrid)</title>
<meta name="description" content="Izquierda Unida Velilla de San Antonio (Madrid)">
<meta name="keywords" content="IU, Izquierda Unida, Velilla de San Antonio">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>css3menu.com</title>

<link rel="stylesheet" href="CSS3 Menu desplegable.css3prj_files/css3menu1/style.css" type="text/css" /> <style type="text/css">._css3m{display:none}</style>


</head>

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">

<div align="center">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="1120"> </td>
</tr>
<tr>
<td><div align="center">

<strong><p class="_css3m"><a href="http://css3menu.com/">pure css
menu</a> by Css3Menu.com</p>

</strong>

<body style="background-color:#EBEBEB">

<ul id="css3menu1" class="topmenu">
<li class="topfirst"><a href="#" style="height:18px;line-height:18px;">INICIO</a></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>ACTIVIDAD MUNICIPAL</span></a>
<ul>
<li><a href="concejales.htm">Concejales</a></li>
<li><a href="programa.htm">Programa electoral</a></li>
<li><a href="mociones.htm">Mociones presentadas por los concejales</a></li>
<li><a href="actas.htm">Actas de los plenos municipales</a></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>LA ASAMBLEA LOCAL</span></a>
<ul>
<li><a href="historia.htm">Historia</a></li>
<li><a href="organizacion.htm">Organización</a></li>
<li><a href="resultados electorales.htm">Resultados electorales</a></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>TRANSPARENCIA</span></a>
<ul>
<li><a href="acuerdos asamblea.htm">Acuerdos de la Asamblea</a></li>
<li><a href="acuerdos consejo">Acuerdos del Consejo Político</a></li>
<li><a href="principios.htm">Principios ideológicos</a></li>
<li><a href="http://www.iucm.org/images/stories/documentos/EstatutosIUCM2013.pdf">Estatutos de IUCM</a></li>
<li><a href="finanzas.htm">Finanzas</a></li>
<li><a href="carta financiera.htm">Carta financiera de IUCM</a></li>
<li><a href="sede.htm">La sede de Velilla de San Antonio</a></li>
<li><a href="declaracion de intereses.htm">Declaración de intereses de concejales</a></li>
</ul></li>
<li class="topmenu"><a href="documentos.htm" style="height:18px;line-height:18px;">DOCUMENTOS</a></li>
<li class="topmenu"><a href="enlaces.htm" style="height:18px;line-height:18px;">ENLACES DE INTERÉS</a></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;">HISTORIAL DE NOTICIAS LOCALES</a></li>
<li class="toplast"><a href="contacto.htm" style="height:18px;line-height:18px;">CONTACTO</a></li>
</ul><p class="_css3m"><a href="http://css3menu.com/">drop down menu</a> by Css3Menu.com</p>


</body>

Y este es el archivo stile:

ul#css3menu1,ul#css3menu1 ul{
margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
ul#css3menu1 ul{
display:none;position:absolute;left:0;top:100%;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;background-color:#FFFFFF;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;border-color:#d4d4d4;padding:0 10px 10px;}
ul#css3menu1 li:hover>*{
display:block;}
ul#css3menu1 li{
position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1 li:hover{
z-index:1;}
ul#css3menu1{
font-size:0;width:100%;z-index:999;position:relative;display:inline-block;zoom:1;padding:0 0%;margin:0 0%;
*display:inline;*padding-right:0.72%;}
* html ul#css3menu1 li a{
display:inline-block;}
ul#css3menu1>li{
margin:0;width:12%;}
ul#css3menu1 li.toplast{
width:16%;}
body:first-of-type ul#css3menu1{
display:inline-table;border-spacing:0px 0;}
body:first-of-type ul#css3menu1>li{
display:table-cell;float:none;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
outline-style:none;}
ul#css3menu1 a{
display:block;vertical-align:middle;text-align:center;text-decoration:none;font:12px Verdana,Geneva,sans-serif;color:#ffffff;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:7px 10px 7px 10px;background-color:#000000;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;}
ul#css3menu1 ul li{
float:none;margin:10px 0 0;}
ul#css3menu1 ul a{
text-align:left;padding:4px;background-color:#FFFFFF;background-image:none;border-width:0;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;font:12px Verdana,Geneva,sans-serif;color:#000;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
background-color:#f8ac00;border-color:#C0C0C0;border-style:solid;color:#000000;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;text-decoration:none;}
ul#css3menu1 span{
display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
background-color:#FFFFFF;background-image:none;color:#868686;text-decoration:none;}
ul#css3menu1 li.topfirst>a{
border-radius:0px 0 0 0px;-moz-border-radius:0px 0 0 0px;-webkit-border-radius:0px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;}
ul#css3menu1 li.toplast>a{
border-radius:0 0px 0px 0;-moz-border-radius:0 0px 0px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:0px;-webkit-border-bottom-right-radius:0px;}
ul#css3menu1>li:nth-of-type(1){width:6%}ul#css3menu1>li:nth-of-type(2){width:15%}ul#css3menu1>li:nth-of-type(3){width:14%}ul#css3menu1>li:nth-of-type(4){width:11%}ul#css3menu1>li:nth-of-type(5){width:10%}ul#css3menu1>li:nth-of-type(6){width:14%}ul#css3menu1>li:nth-of-type(7){width:22%}ul#css3menu1>li:nth-of-type(8){width:8%}
@-moz-document url-prefix(){body:first-of-type ul#css3menu1{display:inline-block} body:first-of-type ul#css3menu1>li{display:block;float:left !important;}}