Vi este menu con submenus en este subforo, y me interesó, por la claridad que presenta.
En IE se despliega todo como debe, los submenus debajo de los elementos sobre los que hacemos mouseover. Pero en Opera o en FF no, el submenu desplaza todos los elementos siguientes. Esto es logico porque no hay nada que defina que al aparecer el submenu deban quedarse quietos los elementos.
El codigo es este, me parece apropiado:
Código PHP:
<html>
<head>
<style>
ul#nav {
clear:both;
position:absolute;
top:100px; left:50px;
list-style-type:none;
}
ul#nav li {
float:left;
width:100px;
overflow: hidden;
}
ul#nav span {
border: solid 1px black;
display:block;
}
ul#nav ul {
clear:both;
width:100px;
list-style-type:none;
margin-left:0;
}
</style>
<script>
slideMenu.Registry = [];
function slideMenu(id) {
slideMenu.Registry[id] = [];
slideMenu.Registry[id]['containerObj'] = document.getElementById(id+"Container");
slideMenu.Registry[id]['contentObj'] = document.getElementById(id+"Content");
slideMenu.Registry[id]['contentObj'].style.display="none";
// mostrar
slideMenu.Registry[id]['containerObj'].onmouseover = function() {
slideMenu.Registry[id]['contentObj'].style.display = 'block';
}
// ocultar
slideMenu.Registry[id]['containerObj'].onmouseout = function() {
slideMenu.Registry[id]['contentObj'].style.display = 'none';
}
}
</script>
<title>Menu sencillo</title>
</head>
<body onload="loadMenu()">
textoo principio
<ul id="nav">
<li id="menu1Container"><span><a href="">Home</a></span></li>
<li id="menu2Container"><span>menu2</span></li>
<ul id="menu2Content">
<li><span><a href="">submenu2.1</a></span></li>
<li><span><a href="">submenu2.2</a></span></li>
<li><span><a href="">submenu2.3</a></span></li>
<li><span><a href="">submenu2.4</a></span></li>
<li><span><a href="">submenu2.5</a></span></li>
</ul>
<li id="menu3Container"><span>menu3</span></li>
<ul id="menu3Content">
<li><span><a href="">submenu3.1</a></span></li>
<li><span><a href="">submenu3.2</a></span></li>
<li><span><a href="">submenu3.3</a></span></li>
<li><span><a href="">submenu3.4</a></span></li>
<li><span><a href="">submenu3.5</a></span></li>
<li><span><a href="">submenu3.6</a></span></li>
</ul>
<li id="menu4Container"><span>menu4</span></li>
<ul id="menu4Content">
<li><span><a href="">submenu4.1</a></span></li>
</ul>
<li id="menu5Container"><span>menu5</span></li>
<ul id="menu5Content">
<li><span><a href="">submenu5.1</a></span></li>
<li><span><a href="">submenu5.2</a></span></li>
</ul>
</ul>
textoo y mas textooo wueeee
<SCRIPT type="text/javascript">
function loadMenu() {
new slideMenu("menu2");
new slideMenu("menu3");
new slideMenu("menu4");
new slideMenu("menu5");
}
</SCRIPT>
</body>
</html>
La duda esta en como fijar los elementos raiz, tal y como se muestra en IE.
