hace un tiempo vengo construyendo un sitio web para mi empresa siguiendo el curso paso a paso y demas cursos de CCTW, apenas ayer me decidi por insertar los menus desplegables y descartar el menu horizontal q aprendi con el curso paso a paso, la web ya estuvo subida en red y funcionaba perfectamente, pero ayer finalmente logre crear un menu bastante descente pero ahora enfrento el problema que despues de subir a la red mi pagina el menu cambia un poco en el Iexplorer y mozilla firefox, pero en google chrome mi pagina quedo completamente destruida, por favor quien me puede ayudar a solucionar esto aca les dejo el link de mi pagina, una imagen de la vista previa en el html y mi codigo html y css.
mi enlace
www.vfmantenimiento.com
Como pueden ver en Iexplorer la pagina parece estar bien pero en el menu q se despliega al pasar por encima de las opciones el cuadro no se vuelve blanco sino negro y en chrome mi pagina esta completamente arruinada....
mi codigo html
Y el codigo css:
AGRADESCO LA COLABORACION DE QUIEN SEA TODO LO Q SE DE PAGINAS WEB LO E APRENDIDO EN CCTW, Y REALMENTE NO TENGO IDEA DE QUE PUEDE SER EL PROBLEMA,,,,,ATT KMILO_SEBAS
mi enlace
www.vfmantenimiento.com
Como pueden ver en Iexplorer la pagina parece estar bien pero en el menu q se despliega al pasar por encima de las opciones el cuadro no se vuelve blanco sino negro y en chrome mi pagina esta completamente arruinada....
mi codigo html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bienvenidos a VF mantenimiento</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<!-- INICIO DE CODIGO DE CABECERA - NO TOCAR -->
<div id="cabecera">
<div id="logotipo">
<a href="index.html">
<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="270" height="80" CODEBASE="http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0">
<PARAM NAME="MOVIE" VALUE="objetos/logotipo.swf">
<PARAM NAME="PLAY" VALUE="true">
<PARAM NAME="LOOP" VALUE="true">
<PARAM NAME="QUALITY" VALUE="high">
<EMBED SRC="objetos/logotipo.swf" width="270" height="80" PLAY="true" LOOP="true" QUALITY="high" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash" alt="Haz clic aquí para volver a la página de inicio">
</EMBED>
</OBJECT>
</a>
</div>
<div id="publicidad"><p>¡Calidad, Puntualidad, Respeto, Honestidad, Servicio Oportuno.</p><a href="mailto:[correo eliminado]">[correo eliminado]</a><a href="mailto:[correo eliminado]">[correo eliminado]</a></div>
</div>
<div id="navegacion">
<div id="menu">
<ul>
<li class="nivel1"><a href="index.html" class="nivel1"><b>Inicio</b></a></li>
<li class="nivel1"><a href="somos/somos.html">Quienes somos</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
<ul>
<li><a href="somos/somos.html">Quienes somos</a></li>
<li><a href="somos/historia.html">Servicio al Cliente</a></li>
<li><a href="somos/mision.html">Mision</a></li>
<li><a href="somos/vision.html">Vision</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="productos/productos.html">Productos</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
<ul>
<li><a href="productos/productos.html">Productos</a></li>
<li><a href="productos/acero.html">Productos en Acero Inoxidable</a></li>
<li><a href="productos/filtros.html">Filtros para la retencion de solidos</a></li>
<li><a href="productos/equipos.html">Equipos de Agua</a></li>
<li><a href="productos/laboratorio.html">Productos para Laboratorio</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="servicios/servicios.html">Servicios</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
<ul>
<li><a href="servicios/servicios.html">Servicios</a></li>
<li><a href="servicios/equipos.html">Mantenimiento de Equipos</a></li>
<li><a href="servicios/ductos.html">Mantenimiento de Ductos</a></li>
<li><a href="servicios/adecuaciones.html">Adecuaciones Locativas</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="contactenos/contactenos.html">Contactenos</a>
</li>
</ul>
</div>
</div>
<!-- FIN DE CODIGO DE CABECERA -->
<div id="contenido">
<br>
<h1> VF Mantenimiento estamos a su servicio</h1>
<br>
<br>
<br>
<div id="espacio">
</div>
<div id="portada">
<br>
<br>
<a href="somos/somos.html">><img src="objetos/portada.jpg"width="490px" height="410px" alt="VF Mantenimiento"></a>
<br>
<br>
<br>
<br>
</div>
</div>
<!-- INICIO DE CODIGO DE PIE DE PAGINA - NO TOCAR -->
<div id="pie">
<div id="pieuno">
</div>
<div id="piedos">
<br>
</div>
<div id="pietres">
</div>
<br>
<br>
<center>Pagina desarrollada por Encode Software</center>
</div>
<div id="curva-inferior"></div>
<!-- FIN DE CODIGO DE PIE DE PAGINA -->
</div>
</center>PBX. 7690558,Cel Gerencia:3105889409-3004035980/Mantenimiento:3125244840</center>
<center>VF Mantenimiento Especializado © 2010. Todos los derechos reservados</center>
</body>
</html>Y el codigo css:
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
body {background-color: #FFFFFF ; background-image: url(objetos/fondo.png); background-repeat: no-repeat ;Background-Attachment: fixed }
p {color:withe; text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ;
text-align: center}
h2 {font-size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ;
text-align: left}
body {text-align: center }
#global {width:800px ; margin:4px auto }
#curva-superior { background-image: url(objetos/curva-superior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
#cabecera {background-color: white ; border-left: black 1px solid ;
border-right: black 1px solid ; height:85px}
#logotipo {width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
#menu { /*Estilos de la capa menu*/
text-align: center;
height:20px;
border:black 1px solid ;
padding:0px;
margin-top: 3px;
margin-bottom: 2px;
}
#menu ul { /*Para los estilos de las listas*/
list-style-type: none; margin-left: 60px }
#menu ul li.nivel1 { /*Para las li de primer nivel*/
float: left;
width: 100px;
margin: 0px 20px 0px 20px;
margin-bottom: 2px;}
#menu ul li a { /*Es para los items de primer nivel, recuerden que son enlaces hacia sitios de la web, no parrafos*/
display: block;
text-decoration: none;
position: relative;
}
#menu ul li:hover { /*Propiedad css de posicionamiento del despliege de sub menu*/
position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 { /*Estilos cuando el cursor este sobre los LI*/
background-color: /*#006*/;
color: /*#000*/;
position: relative;
font size: 1.1;
{color:black ; text-decoration:underline ; background-color:snow }
}
#menu ul li a.nivel1 { /*Mantiene la estructura de el menu*/
display: block!important;
display: none;
position: relative;
}
#menu ul li ul {
display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul { /*Describe el comportamiento que deve tener la sub lista que se despliegara*/
display: block;
position: absolute;
left: 0px;
{color:blue ; text-decoration:underline ; background-color:snow }
}
#menu ul li ul li a { /*Para los sub menus*/
width: 150px;
padding: 6px 0px 6px 0px;
border-top-color: #000;
background-color:#000;
left:0px;
}
#menu ul li ul li a:hover { /*Estilos cuando el cursor esta sobre los enlaces*/
border-top-color: #000;
position: relative;
}
table.falsa { /*Esto es para que el menu funcione en IE, ya que no soporta la pseudoclase HOVER*/
border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
#contenido {background-color:black; border-left: black 1px solid ;
border-right: black 1px solid }
#espacio {background-color: black}
#portada {width:280px ; float:center }
#contenido p {color: white ; margin: 5px 10px 0px 10px ; text-indent: 15px}
#contenido li {color: white }
#contenido id {color: white }
#contenido input name {color: white }
#contenido span {color: white }
#pie {border-left: black 1px solid ; border-right: black 1px solid ;
border-top: black 1px solid ; height: 65px }
#pie li {list-style: none ; font-size: 12px }
#pieuno {float:left ; width:150px; font-size:12px }
#piedos {float:left ; width:498px }
#pietres {float:left ; width:150px }
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
* {text-indent:0px ; margin:0px ; padding:0px ; border:0px }
a {color: blue; text-decoration: none ; display: block }
a:link{color: blue; text-decoration: none}
a:visited{color: DarkOrchid ; text-decoration: none}
a:hover{color:black ;text-decoration:underline ; background-color: silver}
a:active {color:black ; font-size:1.1 em ; text-decoration:underline }
#pie a {color: blue; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}
#publicidad a {}
#publicidad a:link {}
#publicidad a:visited {}
#publicidad a:hover {background-color: white }
#publicidad a:active {}
#contenido a {color: blue; text-decoration:none ; display: block }
#contenido a:link {color:purple}
#contenido a:visited {color:purple}
#contenido a:hover {color:purple; text-decoration:underline ; background-color:black }
#contenido a:active {color:purple} AGRADESCO LA COLABORACION DE QUIEN SEA TODO LO Q SE DE PAGINAS WEB LO E APRENDIDO EN CCTW, Y REALMENTE NO TENGO IDEA DE QUE PUEDE SER EL PROBLEMA,,,,,ATT KMILO_SEBAS