Gracias Cleft, me ayudó muchísimo... pero para terminar y no molestar mas, me estaría faltando lo siguiente:
Al lado de dicho menu colocaré una nueva capa, por lo tanto hice estos cambios (marcados con negrita):
Código:
<html>
<head>
<title></title>
<style type="text/css">
body {
margin:0;
}
div.menu {
width:auto;
background:#FF0000;
float:left;
}
div.menu ul {
margin:0;
padding:0;
}
div.menu li {
list-style:none;
}
div.submenu {
background:#E5E5E5;
position:absolute;
visibility:hidden;
left:150px;
}
div.submenu ul {
float:left;
margin-left:5px;
}
#subfila1 {top:0px;}
#subfila2 {top:20px;}
#subfila3 {top:40px;}
div.nueva {
float:left; */esta capa sera la nueva ubicada a la izquierda del menu*/
}
</style>
<script language="JavaScript">
function menu(op,capa)
{
var valor = document.getElementById(capa);
if (op == 1) { valor.style.visibility="visible"; } else { valor.style.visibility="hidden"; }
}
</script>
</head>
<body>
<div class="menu">
<ul>
<li><a href="fila1.htm" onMouseOver="menu(1,'subfila1')" onMouseOut="menu(2,'subfila1')">FILA 1</a>
<div id="subfila1" class="submenu">
<ul>
<li><a href="aaa.asp">SUBFILA 1</a></li>
<li><a href="aaa.asp">SUBFILA 2</a></li>
<li><a href="aaa.asp">SUBFILA 3</a></li>
<li><a href="aaa.asp">SUBFILA 4</a></li>
</ul>
<ul>
<li><a href="aaa.asp">SUBFILA 1</a></li>
<li><a href="aaa.asp">SUBFILA 2</a></li>
<li><a href="aaa.asp">SUBFILA 3</a></li>
<li><a href="aaa.asp">SUBFILA 4</a></li>
</ul>
</div>
</li>
<li><a href="fila2.htm" onMouseOver="menu(1,'subfila2')" onMouseOut="menu(2,'subfila2')">FILA 2</a>
<div id="subfila2" class="submenu">
<ul>
<li><a href="aaa.asp">SUBFILA 1</a></li>
</ul>
</div>
</li>
<li><a href="fila3.htm" onMouseOver="menu(1,'subfila3')" onMouseOut="menu(2,'subfila3')">FILA 3</a>
<div id="subfila3" class="submenu">
<ul>
<li><a href="aaa.asp">SUBFILA 1</a></li>
<li><a href="aaa.asp">SUBFILA 2</a></li>
<li><a href="aaa.asp">SUBFILA 3</a></li>
<li><a href="aaa.asp">SUBFILA 4</a></li>
</ul>
<ul>
<li><a href="aaa.asp">SUBFILA 1</a></li>
<li><a href="aaa.asp">SUBFILA 2</a></li>
<li><a href="aaa.asp">SUBFILA 3</a></li>
<li><a href="aaa.asp">SUBFILA 4</a></li>
</ul>
<ul>
<li><a href="aaa.asp">SUBFILA 1</a></li>
<li><a href="aaa.asp">SUBFILA 2</a></li>
<li><a href="aaa.asp">SUBFILA 3</a></li>
<li><a href="aaa.asp">SUBFILA 4</a></li>
</ul>
</div>
</li>
</ul>
</div>
<div class="nueva">
<span> ESTO APARECERA EN UN DIV AL LADO DEL MENU ROJO<br></span>
<span> ESTO APARECERA EN UN DIV AL LADO DEL MENU ROJO<br></span>
<span> ESTO APARECERA EN UN DIV AL LADO DEL MENU ROJO<br></span>
<span> ESTO APARECERA EN UN DIV AL LADO DEL MENU ROJO<br></span>
<span> ESTO APARECERA EN UN DIV AL LADO DEL MENU ROJO<br></span>
<span> ESTO APARECERA EN UN DIV AL LADO DEL MENU ROJO<br></span>
<span> ESTO APARECERA EN UN DIV AL LADO DEL MENU ROJO<br></span>
</div
</body>
</html>
Entonces, al ponerle float:left a la capa div.menu, el submenu se muestra mal en el explorer. Como que al ubicarle la nueva capa, ya deja de tener un width:auto y me deja todo en una columna.
Yo lo que quiero es:
1) el menu rojo tenga un ancho de 150 px
2) el submenu que se despliega de cada item rojo, se ajuste automaticamente en columnas tal como me lo corregista anteriormente
3) al lado del menu rojo, ira flotada otra capa (una imagen grande)
Bueno, desde ya muchísimas gracias por la anterior respuesta, se nota que sabes porque nunca se me hubiese ocurrido.
Cualquier otra respuesta será bienvenida.... muchísimas gracias.