我的下拉菜單將其他所有內容下推

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());
  });
});

小提琴

Answer 2

快速修復以保持您的布局。 將以下css添加到nav類中：

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

的jsfiddle

Answer 3

您應該通過將子菜單放置在absolute位置上來設置其樣式