Buenas! ya se que hay que cambiar el "li.hover li" por "li.hover li, li.over li" para que funcione en IE, y tambien el codigo en javascript y el <ul id="nav">, pero al principio me desplegaba el menu como si fuera lineal (inline creo que se dice no?) y solo podia pasar el mouse por enciam de la primera linea (Son 3 porque son muchas opciones) despues cuando logre que sea desplegable hacia abajo (Como debia ser de entreada) me dejaba un terrible espacio entre una opcion y otra, cuando queria pasar a la segunda opcion se me cerraba el menu.
entonces ya no se que hacer, les dejo los dos pares de codigo (Los originales sin las modificaciones para ie [css, html] y los modificados para ie[css, html])
No Modificados Css
Código:
@charset "utf-8";
body{
width:80%;
margin: 0 auto;
scrollbar-3dlight-color : #82BCDA;
scrollbar-darkshadow-color : #82BCDA;
scrollbar-highlight-color : #D7ECF5;
scrollbar-shadow-color : #3985AB;
scrollbar-arrow-color : #0E212A;
scrollbar-face-color : #82BCDA;
scrollbar-track-color : #82BCDA;
}
.contenedor{
margin: 0 auto;
margin-left:10%;
margin-right:auto;
width:80%;
}
#cabecera{
background-image:url(digital2.jpg);
background-repeat:no-repeat;
background-position:center;
border-style:solid;
border-width:1px;
border-color:#000000;
margin: 0 auto;
width:80%;
height:100px;
}
#digitalglobe{
text-align:left;
color:#666666;
font-size:18px;
margin-top:25px;
margin-left:80px;
}
#fecha{
text-align:right;
color:#666666;
font-size:18px;
margin-top:-40px;
}
/*Aca le doy estilo a todo lo que este contenido dentro de la primer etiqueta UL*/
ul {
font-family: Arial, Verdana;
font-size: 17px;
margin:0;
padding:0;
list-style: none;
}
/*Aca les doy el estilo todas las etiquetas LI dentro de UL*/
ul li {
font-size: 17px;
margin:0;
padding:0;
display: block;
position: relative;
float:left;
}
/*Aca mantengo ocultos los menues desplegables*/
li ul {
display: none;
font-size: 17px;
position:absolute;
}
/*Aca le doy estilo a los href en las listas li*/
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
/*Aca le doy estilo a los href cuando pasa el mouse por encima del link*/
ul li a:hover {
background:#FF0066;
}
/*Aca le doy estilo aL despliegue de los botones*/
li:hover ul {
display: block;
}
/*Aca le doy estilo a los botones*/
li:hover li {
float: none;
font-size: 15px;
}
li:hover a {
background: #617F8A;
}
/*Aca le doy estilo a los botones cuando paso el mouse por encima*/
li:hover li a:hover {
background:#00FF00;
}
#index{
width:80%;
margin: 12 auto;
border-style:solid;
border-width:1px;
border-color:#000000;
}
.alta_news
{color:#006666;
text-align:center;
}
.alta_news a{
text-decoration:none;
color:#0066FF;
}
button.enviar{
color:#FFFFFF;
background: #2C5463;
width: 100px;
height: 30px;
}
button.cancelar{
color:#FFFFFF;
background: #2C5463;
width: 100px;
height: 30px;
}
button.reestablecer{
color:#FFFFFF;
background: #2C5463;
width: 100px;
height: 30px;
}
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see ">
<title></title>
<style type="text/css">
li.c1 {list-style: none; display: inline}
</style>
</head>
<body>
<ul>
<li><a href="ofertas.php">Ofertas</a></li>
<li><a href="#">Nuestros Productos</a>
<ul>
<li><a href="">Micros</a></li>
<li><a href="">Mothers</a></li>
<li><a href="">Memorias</a></li>
<li><a href="">Pendrives</a></li>
<li><a href="">Discos</a></li>
<li><a href="">Cd/Dvd/Disk</a></li>
<li><a href="">Notebooks</a></li>
<li><a href="">Gabinetes</a></li>
<li><a href="">Fuentes</a></li>
<li><a href="">Teclados</a></li>
<li><a href="">Parlantes</a></li>
<li><a href="">Monitores</a></li>
<li><a href="">Placas de Video</a></li>
<li><a href="">Web Cams</a></li>
<li><a href="">Impresoras</a></li>
<li><a href="">Conectividad</a></li>
<li><a href="">Placas de Sonido</a></li>
<li><a href="">Consolas</a></li>
<li><a href="">Joysticks</a></li>
<li><a href="">Auriculares</a></li>
<li><a href="">Mouses</a></li>
<li><a href="">Proyectores</a></li>
<li><a href="">Camaras Digitales</a></li>
<li><a href="">Lector/Memorias</a></li>
<li><a href="">Mp3/Mp4</a></li>
<li><a href="">Gps</a></li>
</ul>
</li>
<li><a href="index.php">Sobre Nosotros</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Newsletter</a>
<ul>
<li><a href="news_alta.php">Alta</a></li>
<li><a href="news_baja.php">Baja</a></li>
</ul>
</li>
<li><a href="#">Formas de Pago</a></li>
</ul>
</body>
</html>
todo igual pero en donde esta el
le puse
.
Html
donde esta el
le puse
.
y agregue este javascript en el head (Como debe ser xD )
Código:
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
Y no funciona :S me despliega mal! como lo mencione arriba!
alguien tiene idea de porque pasa eso? Gracias!