No tengo ni idea, pongo el codigo de lo máximo a lo que he llegado casi lo tengo pero la cajas no consigo posicionarlas siempre en la misma posición. Partí de un menu y aparecen siempre alineadas con el botón.
CODIGO:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> prueba menu </title>
<meta name="Author" content="yo" />
<script type='text/javascript'>
clickMenu = function(menu) {
var getEls = document.getElementById(menu).getElementsByTagName ("LI");
var getAgn = getEls;
for (var i=0; i<getEls.length; i++) {
getEls[i].onclick=function() {
for (var x=0; x<getAgn.length; x++) {
getAgn[x].className=getAgn[x].className.replace("unclick", "");
getAgn[x].className=getAgn[x].className.replace("click", "unclick");
}
if ((this.className.indexOf('unclick'))!=-1) {
this.className=this.className.replace("unclick", "");;
}
else {
this.className+=" click";
}
}
}
}
</script>
<style type="text/css">
<!--
#contenedor {width:500px; height:500px; border:1px solid #000000; border-width:1px 1px 1px; position:relative;}
#menu {list-style-type:none; width:644px; padding:0; margin:0 auto;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background: #FFCC66; margin:1px 1px 0 0;position:relative;}
#menu li.sub {background: #6699FF; width:100px;height:24px; }
#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:24px; width:300px; height:300px; text-decoration:none; text-align:center; cursor:pointer; font-weight:bold;} /* SUBMENUS TAMAÑOS */
#menu li:hover, #menu li a:hover {background: #33CC99;}
#menu ul {position:absolute;left:-9999px;width:160px;}
#menu li.click {background: #FF0099;}
#menu li.click ul{left:0; margin-left:0px; top:60px; background:url(transparent.gif);} /* la imagen de fondo es para IE7 */
-->
</style>
</head>
<body onload="clickMenu('menu')">
<ul id="menu">
<li class="sub">menu1
<ul>
<li><a href="#nogo1">01</a></li>
</ul>
</li>
<li class="sub">menu2
<ul>
<li><a href="#nogo6">02</a></li>
</ul>
</li>
<li class="sub">menu3
<ul>
<li><a href="#nogo10">03</a></li>
</ul>
</li>
<li class="sub">menu4
<ul>
<li><a href="#nogo10">04</a></li>
</ul>
</li>
<li class="sub">menu5
<ul>
<li><a href="#nogo10">05</a></li>
</ul>
</li>
<li class="sub">menu6
<ul>
<li><a href="#nogo13">06</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>