我的下拉菜单会向下推其他所有内容

My dropdown menu pushes down everything else

本文关键字：其他 下推 下拉菜单 我的      更新时间：2023-09-26

我希望我的子菜单在其他所有菜单上向下滑动，而不是全部向下推。我可以用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();
  });
});

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

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

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

Fiddle

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

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

JSFiddle

您应该将子菜单定位为absolute

相关文章：