Menu Dropdown

<!----------------------------------------------------->
<!------------- Criado por Allan d´El-Rei ------------->
<!------------- http://www.webmorphos.com ------------->
<!----------------------------------------------------->
<style>
#men { background: gray; padding: 1px 3px; width: 150px; }
#menu { font-weight: bold; padding: 0; width: 149px; }
a { text-decoration: none; color: black; }
#menu, #menu li, #menu li ul { display: block; background: gray; color: white; border-bottom: none; margin: 0;}
#menu li { position: relative; display: block; margin: 1px 0 0 0;padding: 5px 0; text-align: left; background: white;}
#menu li ul { display: none; position: absolute; top: -1; left: 149px; z-index: 1; border-top: 1px solid gray; padding: 0; }
#menu li ul li { border: 1px solid gray; border-top: none; padding: 5px; margin: 0; width: 150px; background: white; }
#menu a { font-weight: bold; color: black; }
#menu span { margin: 5px; color: black; }
</style>
<script>
window.onload = function() {
var wmMenu = document.getElementById('menu');
for(i=0;i<wmMenu.childNodes.length;i++)
{
var wmDiv = wmMenu.childNodes[i]
if (wmDiv.nodeName=='LI') {
wmDiv.onmouseover = function() {
this.childNodes[2].style.display='block';
}
wmDiv.onmouseout= function() {
this.childNodes[2].style.display='none';
}
}
}
}
</script>
<div id="men">
<ul id="menu">
<div style="padding: 5px; background: white;"><a href="javascript:void(0);">Home</a></div>
<li><span>Ajax</span>
<ul>
<li><a href="javascript:void(0);">Carregar na Div</a></li>
</ul>
</li>
<li><span>Menus CSS</span>
<ul>
<li><a href="javascript:void(0);">Menu expansível</a></li>
<li><a href="javascript:void(0);">Menu Dropdown</a></li>
</ul>
</li>
<li><span>Layouts</span>
<ul>
<li><a href="javascript:void(0);">Layout básico (2 Col)</a></li>
<li><a href="javascript:void(0);">Layout Cores random</a></li>
</ul>
</li>
</ul>
</div>