Hola muchachos que tal? hace poco estoy con este tema de CSS y siempre entraba a este foro para buscar informacion pero nunca habia escrito un post, este es el primero ya que intento e intento pero no entiendo donde esta el problema.
El tema es el siguiente, hice un menu desplegable y en firefox se ve barbaro, el problema es cuando lo quiero ver en IE, ahi me complica la vida pq se ve muy mal.
Les dejo el codigo, es corto, simplemente puse las partes q intervienen en el asunto:
Esto es el html
Código PHP:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Prueba</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="sobreheader"> <!-- arriba del header -->
<div id="header"><!--COmienzo de Header -->
<ul class="menu">
<a href=#><li>Link 1</li></a>
<a href=#><li>Link 2</a>
<ul>
<a href=#><li>Deportes</a>
<ul>
<a href=#><li>Menos</li></a>
<a href=#><li>Inicio</li></a>
</ul>
</li>
<a href=#><li>Mas</li></a>
</ul>
</li>
<a href=#><li>Link 3</li></a>
<a href=#><li>Link 4</li></a>
<a href=#><li>Link 5</a>
<ul>
<a href=#><li>Deportes</a>
<ul>
<a href=#><li>Nacional</li></a>
<a href="index.php"><li>Inicio</li></a>
</ul>
</li>
<a href=#><li>Municipal</li></a>
</ul>
</li>
<a href=#><li>Link 6</li></a>
<a href=#><li>Link 7</li></a>
</ul>
</div><!--Fin del Header -->
</div> <!-- fin del sobreheader -->
</body>
</html>
Esto es el CSS (style.css)
Código PHP:
/* CSS Document */
body{
padding:0; margin:15px; font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:13px; color:#6B6854; background-color:#fff;
}
div, p, ul, h1, h2, h3, h4, img, form, input{
padding:0; margin:0;
}
ul{
list-style-type:none;
}
.blank{
clear:both;
font-size:0;
line-height:0;
}
/*------------------sobre header----------------*/
#sobreheader {
background:url(images/barramenu2.bmp) repeat-x bottom;/*fondo gris claro*/
}
/*------------------header----------------*/
#header{
width:778px;
margin:0 auto;
background:url(images/barramenu1.bmp) repeat-x bottom; height:22px;
}
/* TRABAJANDO CON EL MENU */
.menu { top:0px; width:480px; height:19px; position:relative; left:305px;}
.menu a { position:relative;/*AGREGADO*/ text-decoration:none;color: #666; }
ul.menu
{ list-style:none; top:-1;
position:relative;/* AGREGADO */
}
ul.menu li
{ padding:0px 8px 0 8px; height:22px; /* AGREGADO */
position:relative; /* Las coordenadas de los ul inferiores serán relativas al <li> que los contiene */
width:auto;
}
/*AGREGO esto es para cambiarle la fuente al menu, sacarlo cualquier cosa que quede feo*/
ul.menu li a{ color:#000;
font-family: Tahoma, Geneva, sans-serif, sans-serif; font-size:16px; position:relative; }
/*FIN AGREGO*/
ul.menu ul
{
position:relative; /* Esta posición es relativa al <li> que contiene a este <ul> antes abs */
left:76px; /* Para que no monte sobre el <li> */
top:-19px; /*Para que queden bien alineados los sub items antes -3*/
padding-top:0px;/*DISTANCIA DEL MENU AL PRIMER SUB ITEM*/
display:none;
list-style:none;
}
ul.menu li:hover > ul
{ display:block; background:rgb(237,237,237);/*COLOR DE FONDO CUANDO ACTIVO UN SUBMENU*/
/*SE COLOREA TODO una verga*/
}
ul.menu li ul li:hover { background:rgb(220,220,220);} /* COLOREA EL ITEM ACTIVO*/
ul.menu> li > ul /* Solo para los ul debajo de los li de primer nivel. */
{
position:absolute;
left:0px;
top:16px;
display:none;
list-style:none;
}
ul.menu > li /* Sólo para li de primer nivel */
{
display:inline;
}
/* FIN DEL TRABAJO CON EL MENU */
Bueno la verdad si alguno me podria ayudar con este tema me sacaria de un gran apuro, probablemente este mal algo con el tema de los positions porq no puedo entender porq en firefox se ve bien y en ie mal.
Desde ya muchas gracias muchachos!
Un saludo!