Bueno sin clip, cambiandole de posicion; y chapucero, pero no creo que merezca esforzarme mas que lo que tu te has esforzado:
Código PHP:
<html>
<head>
<style>
ul#nav { clear: left; position: absolute; top: 160px; list-style-type: none; margin: 0px; padding: 0px; width: 773px; background: #FFF url('../_images/nav_bk.gif'); }
ul#nav li { display: block; float: left; }
ul#nav li span { border-right: 1px solid #000; border-top: 1px solid #000; border-bottom: 1px solid #000; display: block; width: 128px; }
ul#nav li a { line-height: 23px; display: block; width: 128px; color: #000; text-align: center; text-decoration: none; }
ul#nav li a:hover { background-color: #FFF; }
ul#nav ul { margin: 0px; padding: 0px; list-style-type: none; text-align: left; width: 128px; position: absolute; border: 1px solid #000; overflow: hidden; }
ul#nav ul li { background-color: #FFF; }
ul#nav ul li span { border-right: 0px; border-top: 0px; border-bottom: 1px solid #000; width: 128px; }
ul#nav ul li span a { width: 180px; text-align: left; padding-left: 5px; }
</style>
<script>
slideMenu.Registry = [];
function slideMenu(id,numLines) {
slideMenu.Registry[id] = [];
slideMenu.Registry[id]['height'] = 1;
slideMenu.Registry[id]['containerObj'] = document.getElementById(id+"Container");
slideMenu.Registry[id]['contentObj'] = document.getElementById(id+"Content");
slideMenu.Registry[id]['maxHeight'] = new Number((numLines * slideMenu.lineHeight ) );
slideMenu.Registry[id]['contentObj'].style.position="relative";
slideMenu.Registry[id]['maxSubir']= -slideMenu.Registry[id]['maxHeight'] - slideMenu.lineHeight*1 +4;
slideMenu.Registry[id]['minSubir']= -slideMenu.lineHeight*1 +4;
slideMenu.Registry[id]['subido']= slideMenu.Registry[id]['minSubir'];
slideMenu.Registry[id]['contentObj'].style.top= slideMenu.Registry[id]['minSubir']+"px";
slideMenu.Registry[id]['contentObj'].style.display="none";
slideMenu.Registry[id]['interval'] = null;
slideMenu.Registry[id]['timeout'] = null;
slideMenu.Registry[id]['contentObj'].style.height = '1px';
// slide down events
slideMenu.Registry[id]['containerObj'].onmouseover = function() { slideMenu.showMenu(id); }
slideMenu.Registry[id]['containerObj'].onfocus = function() { slideMenu.showMenu(id); }
// slide up events
slideMenu.Registry[id]['containerObj'].onmouseout = function() { slideMenu.hideMenu(id); }
slideMenu.Registry[id]['containerObj'].onblur = function() { slideMenu.hideMenu(id); }
}
slideMenu.showMenu = function(id) {
clearInterval(slideMenu.Registry[id]['interval']);
slideMenu.Registry[id]['contentObj'].style.display = 'block';
slideMenu.Registry[id]['contentObj'].style.zIndex += 10;
slideMenu.Registry[id]['interval'] = window.setInterval("slideMenu.slideDown('"+id+"')",1);
}
slideMenu.hideMenu = function(id) {
clearInterval(slideMenu.Registry[id]['interval']);
slideMenu.Registry[id]['contentObj'].style.zIndex = 10;
slideMenu.Registry[id]['interval'] = window.setInterval("slideMenu.slideUp('"+id+"')",1);
}
slideMenu.slideDown = function(id) {
for(var i=0;i<15;i++) {
if( slideMenu.Registry[id]['subido'] <= slideMenu.Registry[id]['maxSubir']) {
clearInterval(slideMenu.Registry[id]['interval']);
} else {
slideMenu.Registry[id]['contentObj'].style.height = slideMenu.Registry[id]['height']+'px';
slideMenu.Registry[id]['height'] +=0.5;
slideMenu.Registry[id]['contentObj'].style.top = slideMenu.Registry[id]['subido']+'px';
slideMenu.Registry[id]['subido'] -=0.5;
}
}
}
slideMenu.slideUp = function(id) {
for(var i=0;i<15;i++) {
if( slideMenu.Registry[id]['subido'] >= slideMenu.Registry[id]['minSubir']) {
clearInterval(slideMenu.Registry[id]['interval']);
slideMenu.Registry[id]['contentObj'].style.display = 'none';
} else {
slideMenu.Registry[id]['contentObj'].style.height = slideMenu.Registry[id]['height']+'px';
slideMenu.Registry[id]['height'] -=0.5;
slideMenu.Registry[id]['contentObj'].style.top = slideMenu.Registry[id]['subido']+'px';
slideMenu.Registry[id]['subido'] +=0.5;
}
}
}
</script>
<title>Inicio</title>
</head>
<body>
<SCRIPT type=text/javascript>
//<![CDATA[
function addLoadEvent(func) {
var oldonload = window.onload;
if(typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function loadMenu() {
var menu2 = new slideMenu("menu2",5);
var menu3 = new slideMenu("menu3",6);
var menu4 = new slideMenu("menu4",1);
var menu5 = new slideMenu("menu5",2);
}
addLoadEvent(loadMenu);
//addLoadEvent(externalLink);
slideMenu.lineHeight = 24;
//]]>
</SCRIPT>
<ul id="nav">
<li id="menu1Container"><span><a href="" title="Inicio" >Inicio</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>
</body>
</html>
*EDITO: Ah, se me olvidaba, es un codigo que no funciona ni en Firefox ni en Opera por lo que he podido comprobar. Lo has hecho tu? No lo creo... pero el menu realmente bueno debe funcionar en los 3 navegadores, o por lo menos algun navegador que soporte los estandares, para acostumbrarnos a los que
es, y no lo que dice M$ que sea...