Esta es la pagina:
http://www.design-on.com.ar/collAreco/productos.php
En Firefox se ve perfecto, pero en IE7 se mueve el menu al hacer scroll. En IE6, tambien se mueve y no funciona el menu expandible.
El CSS para el menu:
Código:
#menuMain{
float: left;
margin: 0px 0px -30000px 50px !important;
*margin: 0px 0px -30000px 25px;
padding-bottom: 30000px;
background-color: #FFFFFF;
width: 120px;
}
.menu2{
position:relative;
z-index:100;
}
.menu2 ul {
padding:0px 5px;
margin:0;
list-style-type: none;
background:#FFF;
font-size: 1.3em;
}
.menu2 ul li {
border-bottom: 1px dashed #000;
}
.menu2 ul li ul {
display:none;
position:absolute;
height:0;
overflow:hidden;
top:0;
width:100px;
left:100px;
font-size: 0.8em;
opacity: 0.8;
filter: alpha(opacity=80);
}
.menu2 ul li:hover a,
.menu2 ul li a:hover{
background:#FFF; color:#AA332B;
}
.menu2 ul li a, .menu2 ul li a:visited {
display:block;
text-decoration:none;
color:#AA332B;
padding: 15px 5px 0px 0px;
text-align:right;
}
.menu2 ul li:hover ul li a, .menu2 ul li a:hover ul li a{
display:block;
background:transparent;
color:#AA332B;
line-height:15px;
padding:5px 0 5px 10px;
height:auto;
text-decoration:none;
}
* html .menu2 ul li a, * html .menu2 ul li a:visited {
width:100px;
w\idth:90px;
}
.menu2 ul li:hover ul, .menu2 ul li a:hover ul {
display:block;
height:auto;
background:#FFF;
overflow:visible;
}
El HTML del Menu:
Código:
<div id='menuMain' class='menu2'>
<ul>
<li><a href='novedades.php'>Home</a></li>
<li><a href='javascript:void(0)'>Productos</a>
<?php
include 'db.php';
$query = mysql_query("SELECT * FROM coll_categorias");
if (mysql_num_rows($query)){
echo "<ul>";
while ($row = @mysql_fetch_array($query)) {
echo "<li><a href='productos.php?cat=".$row['id']."&pag=1'>".$row['nombre']."</a></li>";
}
echo "</ul>";
}
?>
</li>
<li><a href='contacto.php'>Contacto</a></li>
<li><a href='novedades.php'>Novedades</a></li>
<li><a href='promociones.php'>Promociones</a></li>
<li><a href='clientes.php'>Clientes</a></li>
</ul>
</div>