Menu Drop Down em Javascript

Olá, estou aqui novamente para mostrar como fazer um menu drop down com Javascript e um pouco de CSS, vamos lá:

Este código você coloca antes de fechar a tag head, ou se preferir pode colocar em uma folha de estilo:

<style type="text/css">
.menu{
border-style:solid;
border-width:1px;
border-color:black;
width:110px;
text-align:center;
background-color: #999999;
}
.submenu{
border-style:solid;
border-width:1px;
border-color:black;
width:110px;
text-align:center;
background-color:gray;
}
</style>
Este é o código em Javascript do menu, que você deve colocar após o CSS:

<script language="javascript" type="text/javascript">

//função que faz aparecer as opções do menu
function aparece(x){
document.getElementById(x).style.display="block";
}

//função que faz sumir as opções do menu
function some(x){
document.getElementById(x).style.display="none";
}

</script>


Agora, esta tabela é colocada dentro do body:

<table border="1">

<tr>

<td onmouseover="aparece('submenu1')" onmouseout="some('submenu1')" class="menu">Menu1

<table id="submenu1" border="1" width="100%" style="display:none;">

<tr><td class="submenu" onmouseover="javascript:style.background='red'" onmouseout="javascript:style.background='gray'">Link1</td></tr>

<tr><td class="submenu" onmouseover="javascript:style.background='red'" onmouseout="javascript:style.background='gray'">Link2</td></tr>

<tr><td class="submenu" onmouseover="javascript:style.background='red'" onmouseout="javascript:style.background='gray'">Link3</td></tr>

<tr><td class="submenu" onmouseover="javascript:style.background='red'" onmouseout="javascript:style.background='gray'">Link4</td></tr>

<tr><td class="submenu" onmouseover="javascript:style.background='red'" onmouseout="javascript:style.background='gray'">Link5</td></tr>

</table>

</td>

</tr>

</table>

O código é bem simples de entender, assim, você pode personalizá-lo mudando a aparência de acordo com o seu gosto. É isso e até mais!