html - Increase the height of DIV with jQuery animate, without pushing the content down -

मेरे पास यह कोड है,

HTML

  & lt; div id = "हेडर-लाइन" & gt; & lt; / div & gt; & Lt; div id = "मुख्य मेनू" & gt; & lt; / div & gt; & Lt; div id = "content" & gt; & lt; / div & gt;   
  सीएसएस   
  # हेडर-लाइन {ऊंचाई: 20px; पृष्ठभूमि रंग: काला; शीर्ष: 0; बाएं: 0; } # मुख्य मेनू {ऊँचाई: 30px; पृष्ठभूमि रंग: हरा; } # सामग्री {पृष्ठभूमि-रंग: नीला; ऊंचाई: 200 पिक्सेल; }   
  जावास्क्रिप्ट   
  $ ("# मेन-मेनू")। होवर (फ़ंक्शन () {$ (यह) .टॉप (सच्चा, झूठा) .टैम ({ऊंचाई: "100 पीएक्स"})}}, फ़ंक्शन () {$ (यह) .स्टॉप (सच्चे, झूठे) .मेट ({ऊंचाई: "30px"}}}) ;   
  
 मैंने मध्य डीआईवी को अपनी ऊंचाई को jQuery के साथ विस्तारित किया है  animate  फ़ंक्शन। लेकिन इस के साथ समस्या यह नीचे नीचे DIV धक्का है   
 इसे नीचे बिना दबाव डाले बिना इसे कैसे बढ़ाएं?   
 
 
 Html को  
  & lt; div id = "header-line" & gt; & lt; / div & gt; & Lt; div id = "content" & gt; & Lt; div id = "main-menu" & gt; होवर पर विस्तार & lt; / div & gt; & Lt; / div & gt;   
 बदलें jquery  
  $ ("# main-menu")। होवर (फ़ंक्शन () {$ (this)। रोक (सही है, गलत ) .मेट ({ऊंचाई: "100 पीएक्स"})}}, फ़ंक्शन () {$ (यह) .स्टॉप (सच्चे, झूठे) .मेट ({ऊंचाई: "30px"})}};   
 शैली को  
  # हेडर-लाइन {ऊंचाई: 20px; पृष्ठभूमि रंग: काला; शीर्ष: 0; बाएं: 0; } # मुख्य मेनू {ऊँचाई: 30px; पृष्ठभूमि रंग: हरा; स्थिति: रिश्तेदार; z- सूचकांक: 3; } # सामग्री {पृष्ठभूमि-रंग: नीला; ऊंचाई: 200 पिक्सेल; }   
 मुख्य उद्देश्य div को दूसरे डिवा के अंदर डाल देना है, फिर यह नीचे दीव को नीचे नहीं डाला जाएगा।