dynamisches Menü

[kris]

Hallo,
ich bin noch nicht sehr fit in jQuery und möchte ein dynamisches menü mit unterpunkten erstellen, das einfach erscheint, wenn ich mit der maus über den oberpunk fahre.
das heißt, ich habe 2 navigationslevel. wenn ich mit der maus über das erste navigationslevel fahre, erscheint das 2.navigationslevel. das 2.navigationslevel muss solange aufgeklappt bleiben, bis ich mit der maus nicht mehr über dem 1. oder 2. navigationslevel bin, mich also außerhalb des bereichs befinde.

aber ich bekomme es leider nicht hin, dass das richtige navigationslevel2 passend zum oberpunkt angezeigt wird. wenn dann werden alle navigationslevel2 angezeigt.
und das schließen des navigationslevel2 wenn ich mich mit der maus nicht mehr im passenden navigationslevel1 und navigationslevel2 befinde, bekomme ich auch nicht hin.

das css ist schon fertig. mit jQuery muss nur das ein- (visibility: visible;) und ausblenden (visibility: hidden;) von navigationlevel2 geregelt werden.
das einblenden bekomme ich hin:

  
$('#navigation > li > div.navigationlevel1 > a').bind('mouseover', mouseOver_Level1);  
  
function mouseOver_Level1() {  
   var parent = $(this).parent().parent();	  
   menueeintrag = parent.find('div.navigationlevel2').eq(0).css('visibility', 'visible');  
}  

aber das mit dem ausblenden funktioniert irgendwie nicht.
kann mir jemand weiterhelfen?

von der struktur muss alles so bleiben. und das navigationlevel2 hat die default-eigenschaft:

  
.navigationlevel2 {  
  visibility: hidden;  
}  

meine html-struktur:

  
<ul id="navigation">  
  
  <li>  
    <div class="navigationlevel1">  
      <span class="header_left">&nbsp;</span>  
      <span class="header_middle">  
        <a href="#">Test 2</a>  
      </span>  
      <span class="header_right">&nbsp;</span>  
    </div>  
  
    <div class="navigationlevel2">  
      <div class="submenue_top">&nbsp;</div>  
        <div class="submenue">  
          <ul>  
            <li><a href="#">Test 2.1</a></li>  
            <li><a href="#">Test 2.2</a></li>  
            <li><a href="#">Test 2.3</a></li>  
            <li><a href="#">Test 2.4</a></li>  
            <li><a href="#">Test 2.5</a></li>  
            <li><a href="#">Test 2.6</a></li>  
            <li class="noLine"><a href="#">Test 2.7</a></li>  
          </ul>  
        </div>  
      <div class="submenue_bottom">&nbsp;</div>  
                   			  
    </div>  
  </li>  
  
  <li>  
    <div class="navigationlevel1">  
      <span class="header_left">&nbsp;</span>  
      <span class="header_middle">  
        <a href="#">Test 3</a>  
      </span>  
      <span class="header_right">&nbsp;</span>  
    </div>  
  
    <div class="navigationlevel2">  
      <div class="submenue_top">&nbsp;</div>  
        <div class="submenue">  
          <ul>  
            <li><a href="#">Test 3.1</a></li>  
            <li><a href="#">Test 3.2</a></li>  
            <li><a href="#">Test 3.3</a></li>  
            <li><a href="#">Test 3.4</a></li>  
            <li><a href="#">Test 3.5</a></li>  
            <li><a href="#">Test 3.6</a></li>  
            <li class="noLine"><a href="#">Test 3.7</a></li>  
          </ul>  
        </div>  
      <div class="submenue_bottom">&nbsp;</div>  
                   			  
    </div>  
  </li>  
  
</ul>