HILFE BITTE - CSS Aufklappmenü

[Kcio]

Hallo alle zusammen,

ich habe im mai matura und in info habe ich mir als spezialgebiet ein Css Aufklappmenü, mit einer kleinen Java script funktion ausgesucht.
ich kenne mich schon aus... jedoch habe ich einige probleme beim dem ganzen, vorallem wie das mit dem java script genau funktioniert.

deswegen kopiere ich euch meinen qulltext hinein und ich BIN ÜBER ABSOLUT JEDE HILFE UNENDLICH VIEL DANKBAR denn das ist sehr wichtig für mich.

Also: Die java script funktion:

Code:

function auf(menu) {

// DOM ALLE NEUEN BROWSER
if (document.getElementById) {
document.getElementById(menu).style.visibility="visible";
}

// IE 5

if (document.all) {
document.all[menu].style.visibility="visible";
}

// NN 4
if (document.layers) {
document.layers[menu].visibility="visible";
}
}

function zu(menu) {


if (document.getElementById) {
document.getElementById(menu).style.visibility="hidden";
}


if (document.all) {
document.all[menu].style.visibility="hidden";
}

if (document.layers) {
document.layers[menu].visibility="hidden";
}
}

Die CSS Datei für das Auf klapp menü:

Code:

/* Hauptrubriken */

div.leiste {
    text-align: center;
    font-weight: bold;
    background: #E6E6E6;
    border: solid 1px black;
    position: absolute;
    top: 15px;
    left: 430px;
    height: 14px;
    width: 100px;
    font-family: Verdana;
    font-size: 10px;
    color: #43677C;
    z-index: 3;
}


div.leiste2 {
font-weight: bold;
text-align:center;
background: #E6E6E6;
position: absolute;
color: #43677C;
top: 15px;
left:530px;
line-height: 14px;
width: 100px;
font-family: Verdana,sans-serif;
font-size: 10px;
border:solid 1px black;
z-index:3;
}


div.leiste3 {
font-weight: bold;
text-align:center;
background: #E6E6E6;
position: absolute;
color: #43677C;
top: 15px;
left: 630px;
line-height: 14px;
width: 100px;
font-family: Verdana,Arial, Helvetica, sans-serif;
font-size: 10px;
border:solid 1px black;
z-index:3;
}


div.leiste4 {
font-weight: bold;
text-align:center;
background: #E6E6E6;
position: absolute;
color: #43677C;
top: 15px;
left:730px;
line-height: 14px;
width: 100px;
font-family: Verdana,Arial, Helvetica, sans-serif;
font-size: 10px;
border:solid 1px black;
z-index:3;
}

div.leiste5 {
    font-weight: bold;
    text-align: center;
    background: #E6E6E6;
    color: #43677C;
    position: absolute;
    top: 15px;
    left: 830px;
    line-height: 14px;
    width: 100px;
    font-family: Verdana,Arial, Helvetica, sans-serif;
    font-size: 10px;
    border: solid 1px black;
    z-index: 3;
}


/* Position Unterrubriken */

div.menu1 {
    font-weight: bold;
    background: #E6E6E6;
    border: solid 1px black;
    position: absolute;
    color: #43677C;
    top: 35px;
    left: 430px;
    line-height: 14px;
    width: 100px;
    visibility: hidden;
    font-family: Verdana,Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 20px;
    z-index: 3
}

div.menu2 {
    font-weight: bold;
    background: #E6E6E6;
    border: solid 1px black;
    position: absolute;
    color: #43677C;
    top: 35px;
    left: 530px;
    line-height: 14px;
    width: 100px;
    visibility: hidden;
    font-family: Verdana,Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 20px;
    z-index: 3

}

div.menu2b {
    font-weight: bold;
    background: #E6E6E6;
    border: solid 1px black;
    position: absolute;
    color: #43677C;
    top: 55px;
    left: 631px;
    line-height: 14px;
    width: 100px;
    visibility: hidden;
    font-family: Verdana,Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 20px;
    z-index: 3
}

div.menu3 {
    font-weight: bold;
    background: #E6E6E6;
    border: solid 1px black;
    position: absolute;
    color: #43677C;
    top: 35px;
    left: 630px;
    line-height: 14px;
    width: 100px;
    visibility: hidden;
    font-family: Verdana,Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 20px;
    z-index: 3
}


div.menu4 {
    font-weight: bold;
    background: #E6E6E6;
    border: solid 1px black;
    position: absolute;
    color: #43677C;
    top: 35px;
    left: 730px;
    line-height: 14px;
    width: 100px;
    visibility: hidden;
    font-family: Verdana,Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 20px;
    z-index: 3
}

div.menu4b {
    font-weight: bold;
    background: #E6E6E6;
    border: solid 1px black;
    position: absolute;
    color: #43677C;
    top: 75px;
    left: 831px;
    line-height: 14px;
    width: 100px;
    visibility: hidden;
    font-family: Verdana,Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 20px;
    z-index: 3
}    

div.menu5 {
    font-weight: bold;
    background: #E6E6E6;
    border: solid 1px black;
    position: absolute;
    color: #43677C;
    top: 35px;
    left: 830px;
    line-height: 14px;
    width: 100px;
    visibility: hidden;
    font-family: Verdana,Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 20px;
    z-index: 3
}

/*
Aussehen der Links */

a:link {display: block;
text-decoration: none;
font-family:Verdana, sans-serif;
font-size: 10px;
font-weight: bold;
color: #43677C;
background-color:white;
width:100px;
line-height: 14px;
text-align:center;
line-height:20px;
z-index: 3
}

a:visited {
text-decoration: none;
font-family:Verdana, sans-serif;
font-size: 10px;
font-weight: bold;
color: #43677C;
background-color:white;
width:100px;
line-height: 14px;
text-align:center;
line-height:20px;
z-index: 3
}
a:active {
    text-decoration: none;
    font-family: Verdana, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #43677C;
    background: #E6E6E6;
    width: 100px;
    line-height: 14px;
    text-align: center;
    line-height: 20px;
}

a:hover {
    text-decoration: none;
    font-family: Verdana, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: black;
    background-color:#E6E6E6;
    background: url('pfeil.gif') no-repeat ;
    width: 100px;
    line-height: 14px;
    text-align: center;
    line-height: 20px;
}



und jetzt was im html head tag drinnen steht:

und jetzt was im html head tag drinnen steht:

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" href="format.css" type="text/css">

<link rel="stylesheet" type="text/css" href="menue.css" >
<script type="text/javascript"src="menue_oben.js"></script>




<div id="leiste" class="leiste"onmouseover="auf('menu1')" onmouseout="zu('menu1')">
<a href="javascript:auf('menu1')"
onmouseover="auf('menu1')" onmouseout="zu('menu1')">
Der Verein</a></div>
<div id="menu1" class="menu1" javascript:auf('menu1')
onmouseover="auf('menu1')" onmouseout="zu('menu1')">
[url=#]Entstehung[/url]
[url=#]Angebot[/url]
[url=#]Vorstand[/url]
[url=#]Trainer[/url]
</div>

<div id="leiste2" class="leiste2" onmouseover="auf('menu2')" onmouseout="zu('menu2')">
<a href="javascript:auf('menu2')"
onmouseover="auf('menu2')" onmouseout="zu('menu2')"
>
St&auml;dte</a></div>
<div id="menu2" class="menu2" javascript:auf('menu2')
onmouseover="auf('menu2')" onmouseout="zu('menu2')"
>
[url=#]Brighton[/url]
[url=#]Bremen&raquo;[/url]
[url=#]Amsterdam[/url]
</div>

<div id="menu2b" class="menu2b" onmouseover="auf('menu2b')" onmouseout="zu('menu2b')">
[url=#]Meister[/url]
[url=#]Pokalsieger[/url]
</div>


<div id="leiste3" class="leiste3" onmouseover="auf('menu3')" onmouseout="zu('menu3')">
<a href="javascript:auf('menu3')"
onmouseover="auf('menu3')" onmouseout="zu('menu3')"
onmouseout="zu('menu3')">
Fl&uuml;sse</a></div>

<div id="menu3" class="menu3" javascript:auf('menu3')
onmouseover="auf('menu3')" onmouseout="zu('menu3')"
>
[url=#]Weser[/url]
[url=#]Rhein[/url]
[url=#]Elbe[/url]
[url=#]Main[/url]
[url=#]Isar[/url]
</div>

<div id="leiste4" class="leiste4" onmouseover="auf('menu4')" onmouseout="zu('menu4')">
<a href="javascript:auf('menu4')"
onmouseover="auf('menu4')" onmouseout="zu('menu4')"
onmouseout="zu('menu4')">
Menue4</a></div>

<div id="menu4" class="menu4" javascript:auf('menu4')
onmouseover="auf('menu4')" onmouseout="zu('menu4')"
>
[url=#]Top1[/url]
[url=#]Top2[/url]
[url=#]Top3&raquo;[/url]
[url=#]Top4[/url]
</div>

<div id="menu4b" class="menu4b" onmouseover="auf('menu4b')" onmouseout="zu('menu4b')">
[url=#]&raquo;Test1[/url]
[url=#]&raquo;Test2[/url]
[url=#]&raquo;Test3[/url]

</div>



<div id="leiste5" class="leiste5" onmouseover="auf('menu5')" onmouseout="zu('menu5')">
<a href="javascript:auf('menu5')"
onmouseover="auf('menu5')" onmouseout="zu('menu5')"
onmouseout="zu('menu5')">
Menue5</a></div>

<div id="menu5" class="menu5" javascript:auf('menu5')
onmouseover="auf('menu5')" onmouseout="zu('menu5')"
>
[url=#]Top1[/url]
[url=#]Top2[/url]
[url=#]Top3[/url]
</div>

</head>

was ich jetzt von euch brache:
wie funktioniert die java script funktion mit dem menü??
ich brauche das alles genau erklärt, welche funktion was macht und so weiter, und dann muss ich auch noch wissen wie das ganze damm im auf der html seite funktioniert mit dem layern und so weiter, ich weiß es ist viel, aber cih brauche das wirklich dringend, also wenn jeder mir ein wenig helfen kann wäre es echt super!

ausschauen tut es dann so:
VIELEN DANK!!

Chris