Question

我希望我的子菜单可以向下滑动其他所有内容，而不是将其全部向下推。我可以使用position:fixed;来实现这一点，但子菜单的大小会发生变化。如何解决这个问题并保持子菜单的宽度？

HTML：

<div id="nav">
  <div id="meny">
    <ul id="menu">
      <li class="dropmenu"><a href="#">Abcde</a>
        <ul class="submenu">
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
        </ul>
      </li>
      <li class="dropmenu"><a href="#">Fghijklm</a>
        <ul class="submenu">
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
        </ul>
      </li>
      <li class="dropmenu"><a href="#">Shop</a>
        <ul class="submenu">
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<div id="content">
  <p>Texting texting</p>
</div>

CSS：

#nav{
width: 956px;
margin: 0 auto;
}

#meny{
display: table;
width: 100%;
border-collapse: collapse;
border: none;
}

#menu{
display: table-row;
list-style: none;
font-family: Verdana, Arial, sans-serif; 
font-size: 0.9em;
}

.dropmenu{
display: table-cell;
}

.dropmenu a {
display: block;
text-decoration: none;
text-align: center;
background-color: #ff5b2e;    
color: #303030;
}

.submenu{
display: none;
list-style: none;
background: #ff5b2e;
padding: 0;
width: auto;
}

.submenu li {
width: 100%;
display: block;
}

.submenu li a {
width: 100%;
background: #ff5b2e;
color: #303030;
}

JavaScript的：

$(document).ready(function() {
  $('.dropmenu').hover(function() {
    $(this).find('.submenu').stop().slideToggle();
  });
});

Answer 1

要防止内容被推到底部，您必须使用position: absolute;

但是这会导致下拉菜单宽度出现问题，因为您正在使用表/表格单元结构。没有简单的方法可以使用css调整下拉菜单的宽度，因此您可以使用JQuery来计算它。

$(document).ready(function() {
  $('.dropmenu').hover(function() {
    $(this).find('.submenu').stop().slideToggle().css('width', $(this).width());
  });
});

Fiddle

Answer 2

快速修复以保持您的布局。将以下css添加到nav类：

height: 20px;
position: relative;
z-index: 2;

JSFiddle

Answer 3

您应该通过定位它来为您的子菜单设置样式absolute

我的下拉菜单推送了其他所有内容

3 个答案:

JSFiddle