I have some problems with my Dropdown-menu that I realized with jquery.

I have got 4 divs which have a width of 160px and a height of 25px. if i hover them, the width goes to 270 px without an animation time of 0 ms and then the height goes to 375 with an animation time of 300 ms. 

jquery code:

2. $('#fruhstuck').mouseover(function() {
3.   $('#fruhstuck').animate({
4.     height: '+=215'
5.     }, 300, function() {
6.   });
7. });
8. $('#fruhstuck').mouseout(function() {
9.    $('#fruhstuck').animate({
10.      height: '-=215'
11.      }, 300, function() {
12.    });
13.  });
14. $('#mittag').mouseover(function() {
15.   $('#mittag').animate({
16.     width: '+=245'
17.     },0, function() {
18.   });
19.   $('#mittag').animate({
20.     height: '+=215'
21.     }, 300, function() {
22.   });
23. });
24. $('#mittag').mouseout(function() {
25.    $('#mittag').animate({
26.      height: '-=215'
27.      }, 300, function() {
28.    });
29.    $('#mittag').animate({
30.     width: '-=245'
31.     },0, function() {
32.   });
33.  });
34. $('#kaffee').mouseover(function() {
35.   $('#kaffee').animate({
36.     width: '+=245'
37.     }, 0, function() {
38.   });
39.   $('#kaffee').animate({
40.     height: '+=215'
41.     }, 300, function() {
42.   });
43. });
44. $('#kaffee').mouseout(function() {
45.    $('#kaffee').animate({
46.      height: '-=215'
47.      }, 300, function() {
48.    });
49.    $('#kaffee').animate({
50.     width: '-=245'
51.     }, 0, function() {
52.    });
53.  });
54. $('#abend').mouseover(function() {
55.   $('#abend').animate({
56.     width: '+=245'
57.     }, 0, function() {
58.   });
59.   $('#abend').animate({
60.     height: '+=215'
61.     }, 300, function() {
62.   });
63. });
64. $('#abend').mouseout(function() {
65.    $('#abend').animate({
66.      height: '-=215'
67.      }, 300, function() {
68.    });
69.    $('#abend').animate({
70.     width: '-=245'
71.     }, 0, function() {
72.   });
73.  });

 

they all have a z-index so the last is on the top, the 3rd is under it, the 2rd is under the 3rd and the 1st is under the 2nd. 

css-code:

2. .menuelement {
3.  width:160px;
4.  height:25px;
5.  margin:0px; 
6.  display:inline;
7.  float:left;
8.  margin-top:13px;
9.  padding-top:5px;
10.  padding-left:13px;
11.  padding-right:13px;
12.  font-size:19px;
13.  cursor:pointer;
14.  z-index:100;
15.  position:relative;
16.  overflow:hidden;
17.  
18. }
19. .melementinhalt {
20.  overflow:hidden;
21.  height:185px;
22.  width:380px;
23.  margin-left:10px;
24. }
25. #fruhstuck {
26.  position:absolute;
27.  left:50px;
28.  background-image:url(../images/anikasten.png);
29.  width:405px;
30.  z-index:15;
31. }
32. #mittag {
33.  position:absolute;
34.  left:240px;
35.  width:160px;
36.  background-image:url(../images/anikasten.png);
37.  z-index:16;
38. }
39. #kaffee {
40.  position:absolute;
41.  left:420px;
42.  width:160px;
43.  background-image:url(../images/anikasten.png);
44.  z-index:17;
45. }
46. #abend {
47. position:absolute;
48. right:10px;
49. width:160px;
50. background-image:url(../images/anikasten_abend.png);
51. z-index:30;
52. }

so, the first problem is:

if i come to fast over one of the divs, it goes crazy up and down a few times. I don't know why.

esplacially with the 4th div, the #abend div, i have a problem. it goes 2 times up and down if i hover it.

the second problem is: if i come from the first menu item to the second, it works fine. also that works for the 2nd and 3rd and from the 3rd to the 4th. but if i go from the 4th to the 3rd, it doesnt work, because the 4th div is still 270px wide and so its over the other div. i don't know how to solve this.

here is the site with the slide-down menu:  http://puravida-fulda.de/

sorry for my bad english i'm still at learning ;)

greetings, Ole