Problem mit aufklappbarem Menü

Hallo,

ich habe mir ein aufklappbares Menü gebaut, welches aufklappt, wenn die Maus drüber ist und wieder zu, wenn man die Maus entfernt (nach unten).

Das Auf- und Zuklappen funktioniert auch, nur werden beim Aufklappen der oberen Menüpunkte die unteren überdeckt. Ich möchte nun gerne wissen, was ich machen muss, damit die unteren Menüpunkte mit nach unten verschoben werden und wenn sich der obere Menüpunkt schließt, die anderen wieder nach oben gehen.

Das müsste doch eigentlich in dem Teil des Codes stehen, oder?

<style type="text/css" media="screen">
<!--
body
{
font-family: Verdana, sans-serif;
font-size: 14px;
overflow: visible;
padding: 0px;
margin: 0px;
}

ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

.menu
{
position: absolute;
z-index: 3;
top: 10px;
}

.menu li
{
width: 140px;
float: bottom;
}

.menu a
{
border: 1px solid #888;
background-color: #fff;
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: default;
margin: 0px 2px;
display: block;
height: 20px;
color: #000;
}

.menu a:hover
{
background-color: #ccc;
}

#smenu1, #smenu2, #smenu3, #smenu4
{
font-size: 12px;
display: none;
width: 140px;
float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a
{
font-weight: normal;
padding-top: 2px;
border-top: 0px;
cursor: pointer;
}
//-->
</style>

<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}

function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>

Ich hoffe, ihr könnt mir helfen.

Viele Grüße
K3HLIM