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

我已经更新了你的小提琴：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类而不是内联样式。

Answer 2

喜欢这个？ DEMO

代码我添加了：

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

Answer 3

希望它会有所帮助，将位置绝对添加到#subDiv，然后#subDiv重叠内容Div。

#submenu{

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

demo

在悬停菜单子菜单时，内容向下滑动。如何不下载内容和子菜单重叠内容？

3 个答案: