onmouseover,onmouseout

[html001]

Hallo,

Ich bastle gerade an einer Homepage und habe folgendes Problem:
Ich habe diesen Quelltext geschrieben:

<script language="JavaScript" type="text/javascript">
function move1(){
document.getElementById("box2").style.top = "90px";
document.getElementById("p1").style.visibility = "visible";
document.getElementById("p2").style.visibility = "visible";
}

function move2(){
document.getElementById("box2").style.top = "50px";
document.getElementById("p1").style.visibility = "hidden";
document.getElementById("p2").style.visibility = "hidden";
}
</script>
<script language="JavaScript" type="text/javascript">
var m1;
m1=0;

function move1(){


if(m1==0){
document.getElementById("box2").style.top = "90px";
document.getElementById("p1").style.visibility = "visible";
document.getElementById("p2").style.visibility = "visible";
m1=1;
}
else{
m1=0;
document.getElementById("box2").style.top = "50px";
document.getElementById("p1").style.visibility = "hidden";
document.getElementById("p2").style.visibility = "hidden";
}
}

 

function move2(){
m1=0;
document.getElementById("box2").style.top = "50px";
document.getElementById("p1").style.visibility = "hidden";
document.getElementById("p2").style.visibility = "hidden";
}
</script>
<style type="text/css">
<!--
#box1 {
position:absolute;left:500px;top:50px;
top:30px;
left:20px;
z-index:4;
-moz-border-radius:50px;
-khtml-border-radius:50px;
}
#box2 {
position:absolute;left:500px;top:50px;
top:50px;
left:20px;
z-index:3;
-moz-border-radius:30px;
-khtml-border-radius:30px;
}

#p1 {
position:absolute;left:500px;top:50px;
left:20px;
top:50px;
z-index:2;
visibility: hidden;
-moz-border-radius:30px;
-khtml-border-radius:30px;
}
#p2 {
position:absolute;left:500px;top:50px;
left:20px;
top:70px;
z-index:1;
visibility: hidden;
-moz-border-radius:30px;
-khtml-border-radius:30px;
}

.d1 {
position:absolute;left:500px;top:50px;
width:130px;
height:20px;
color: #000000;
background-color: #0073BB;
border: 1px solid #000000;
text-indent: 3px;
padding-top: 2px;
-moz-border-radius:50px;
-khtml-border-radius:50px;
}

.d3 {
position:absolute;left:500px;top:50px;
width:130px;
height:0px;
color: #000000;
background-color: #0073BB;
border: 0px solid #660000;
text-indent: 3px;
padding-top: 2px;
-moz-border-radius:30px;
-khtml-border-radius:30px;
}

.d2 {
position:absolute;left:500px;top:50px;
width:130px;
height:20px;
color: #000000;
background-color: #0073BB;
text-indent: 10px;
border-bottom: 1px dotted #000000;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
border-top-width: 1px;
border-top-color: #000000;
margin-top: 2px;
line-height: 15pt;
-moz-border-radius:30px;
-khtml-border-radius:30px;
}

.d4 {
position:absolute;left:500px;top:50px;
width:130px;
height:20px;
color: #000000;
background-color: #0073BB;
text-indent: 10px;
border-bottom: 1px solid #000000;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
border-top-width: 1px;
border-top-color: #000000;
margin-top: 2px;
line-height: 15pt;
-moz-border-radius:30px;
-khtml-border-radius:30px;
}
-->
</style>
<style type="text/css">
#box3{
width:200px;
height:100px;
border:1px solid #996600;
}
#box4{
width:200px;
height:200px;
border:1px solid #996600;
}
</style>
</a></p></font> </div>
<div id="box4" style="position:absolute;left:0px;top:100px;" onmouseout="move2()">
<div id="box1" class="d1" ><a href="javascript:;" onmouseover="move1()">Kontakt</a></div>
<div id="box2" class="d3"></div>
<div id="p1" class="d2"><a href="" id="link1">Impressum</a></div>
<div id="p2" class="d4"><a href="" id="link1">Kontakt</a></div>

das ganze sieht dann ungefähr so aus:
__________
|
|_________|

und wenn man dann drauf geht:
__________
|
|_________|
|
|_________|


allerdings weiß ich nicht wie man es macht das sich das ganze wieder schließt.
Mit onmouseout klappt sich das ganze wieder zu wenn ich auf die unteren Kästen gehe:(
,aber es soll sich erst schließen wenn ich von dem ganzen Teil weggehe da ich die
unteren Links noch anklicken will.

Vielen dank schon mal im voraus

Html001

 

[Timmer]

Möchtest du evtl. eine Navigation damit coden? Klingt jedenfalls für mich so. In diesem Falle würde ich auf Listen und CSS zurückgreifen, schnellere & elegantere Lösung, die alle Clienten, auch ohne JavaScript, betrifft =)

 

[html001]

wie würde denn eine Lösung mit Listen aussehen?

 

[Timmer]

Style:

<style>
    #navigation li {float:left;}
    .submenu {display:none;}
    #navigation li:hover .submenu {display:block;}
</style>

HTML:

<ul id="navigation">
    <li>Menüpunkt 1
        <ul class="submenu">
            <li>Unterpunkt 1</li>
            <li>Unterpunkt 2</li>
        </ul>
    </li>
    <li>Menüpunkt 2
        <ul class="submenu">
            <li>Unterpunkt 1</li>
            <li>Unterpunkt 2</li>
        </ul>
    </li>
</ul>

Weitere Links:
Menüs mit CSS erstellen - CSS - Tutorials, Tipps und Tricks für Webmaster auf Webmasterpro.de
CSS-Tutorial: Aufklappmenü (Drop-Down Menü) | www.silent-fran.de

 

[html001]

Vielen Dank du hast mir sehr weiter geholfen.=D

 

[Timmer]

Kein Problem, beim nächsten Mal am besten einfach noch dazuschreiben, was du vorhast, dann kommt die passende Lösung noch schneller =)

Und ich freue mich immer über einen positiv bewerteten Beitrag =)

[EDIT]

Und ganz vergessen: Willkommen im Forum und Frohes Neues!