當菜單子菜單的懸停顯示並且內容向下滑動時。如何不下滑內容和子菜單在內容上重疊？

Question

出現主菜單子菜單懸停時，主菜單後的內容向下滑動。這裏的代碼片段

HTML：

<div id="holderDiv"> 
    <div id="menu"> 
     <a href="#" id="items">Menu 1</a> 
    </div> 
    <div id="submenu" style="height:100px;background:green;"> 
     <a href="#">Sub Menu 1</a> 
     <a href="#">Sub Menu 2</a> 
     <a href="#">Sub Menu 3</a> 
    </div> 
</div> 
<div style="height:500px;background:red;text-align:center">Content</div> 

的javascript：

$("#submenu").hide(); 

$("#menu").on('mouseover', function() { 
    $("#submenu").slideDown(500); 
}); 

$("#holderDiv").on('mouseleave', function() { 
     $("#submenu").slideUp(500); 
}); 

這裏是的jsfiddle：http://jsfiddle.net/YKKrM/1/

Answer 1

喜歡這個？ DEMO

代碼中，我說：

#submenu { 
    position:absolute; 
    width: 100%; 
} 

Answer 2

希望這將有助於加絕對位置#subDiv，然後#subDiv重疊的內容股利。

#submenu{ 

position:absolute; 
    width:90%; 
padding:20px 20px 0 20px; 
} 

demo

Answer 3

我已經更新了你的小提琴這樣：http://jsfiddle.net/YKKrM/5/

我添加style="position: relative;"你holderDiv，並position: absolute; width: 100%;到子菜單風格。

下面是更新HTML：

<div id="holderDiv" style="position: relative;"> 
    <div id="menu"> 
     <a href="#" id="items">Menu 1</a> 
    </div> 
    <div id="submenu" style="height:100px;background:green;position: absolute; width: 100%"> 
     <a href="#">Sub Menu 1</a> 
     <a href="#">Sub Menu 2</a> 
     <a href="#">Sub Menu 3</a> 
    </div> 
    </div> 
<div style="height:500px;background:red;text-align:center">Content</div> 

提示：我建議你使用CSS類，而不是內嵌樣式。