Drop-Down Menu with jQuery

Question

I'm working on an Drop-Down Menu but without success.
I want the same function like the Drop-Down menu by Sony .I have even tried to imitate this effect, but I had a few difficulties.

My HTML:

<div id="main_menu">
<div id="main_menu_container">
    <div id="main_menu_links">
        <a href="" class="main_menu_link">Startseite</a>
        <a id="drop_down_link1" class="main_menu_link">Events</a>
        <a id="drop_down_link2" class="main_menu_link">Clan</a>
        <a id="drop_down_link3" class="main_menu_link">Irgendetwas</a>
    </div>
</div>
<div id="drop_down_container">
    <div id="drop_down_content1" class="drop_down_content"></div>
    <div id="drop_down_content2" class="drop_down_content"></div>
    <div id="drop_down_content3" class="drop_down_content"></div>
</div>

jQuery:

$("#drop_down_link1").mouseenter(function (){
    $("#drop_down_content1").stop().slideDown();
});
$("#drop_down_content1, #drop_down_link1").mouseleave(function (){
    $("#drop_down_content1").delay(350).slideUp();
});

FIDDLE

The problem in my script is, when i leave drop_down_link1 or drop_down_content1 then the content 'slideUp' but when i hover from drop_down_link1 to drop_down_content1 then there shouldn't be the function.

So my question is:

1. How can I do this that I can move between the link and the 'content' with my mouse without 'content' close?
2. My code is very unprofessional. How do I make it so that I do not repeat myself when 'Events' and 'Clan' have the same function?

Answer 1

http://jsfiddle.net/PKvZ2/

Try with this code. I added :

$("#drop_down_link1,#drop_down_container").mouseenter(function (){
    $("#drop_down_content1").stop().slideDown();
});
$("#drop_down_content1, #drop_down_link1,#drop_down_container").mouseleave(function (){
    $("#drop_down_content1").delay(350).stop().slideUp();
});

Or this

$("#drop_down_link1,#drop_down_container").hover(function (){
    $("#drop_down_content1").stop().slideDown();
},function(){
        $("#drop_down_content1").stop().slideUp();

});

http://jsfiddle.net/bT8Cp/

Answer 2

Very simple! Just handle both #drop_down_link1 and #drop_down_content1 mouseenter events as follows

    $("#drop_down_link1,#drop_down_content1").mouseenter(function (){
       $("#drop_down_content1").stop().slideDown();
     });
   $("#drop_down_content1, #drop_down_link1").mouseleave(function (){
      $("#drop_down_content1").delay(350).stop().slideUp();
    });

2.

   $('#main_menu_container a.main_menu_link').each(function(index,item){
      alert(index);
      var $this=$(this),
          $dropdownContent=$('#drop_down_container .drop_down_content')
      [index];

     ......

  });