javascript - 我的下拉菜单压低了其他所有内容

Question

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

Fiddle

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