Html 使CSS下拉列表显示在div上

我有一个基于html/CSS的下拉列表出现在hovereover上。然而，当你将鼠标悬停在链接上时，它会使下拉列表中的div变得更高，基本上迫使页面中的其余内容向下推。然而，我想要的是，当您悬停在上面以获得下拉列表时，不要向下推内容

以下是JSFIDLE上的代码

CSS

HTML

---

我可以看到，您已经在manimail下拉列表内容中注释掉了position:absolute。事实上，这就是你需要的。您可能需要做一些调整，将右键设置为0px，使菜单显示在屏幕上

.manimail-dropdown-content{
    right: 0px;
    position: absolute;
}

.topinfobar{背景颜色：000000；颜色：ffffff；} .toprowpadding{填充顶部：8px；填充底部：8px；} .freeshiptext{左填充：25px；} .manimailtext{text align:right；padding right:35px；} .manimaildropdown{位置：相对；显示：内联块；} .manimail下拉列表内容{显示：无；右：0px； 位置：绝对；背景色：f9f9f9；最小宽度：336px；方框阴影：0px 8px 16px 0px rgba0,0,0.2；填充：6px 22px；z索引：999999； /*左边距：-150%；*/高度：50px；} .manimail下拉列表：悬停.manimail下拉列表内容{display:block；} 标题_时事通讯{宽度：60%；浮点：左；颜色：000000；} headersubscribe按钮{float:right；} headersubscribe按钮，headersubscribe按钮：悬停{背景色：9C162C；颜色：ffffff；} 订单免费送货30美元或以上 马尼邮件注册

   <div class="row topinfobar">
  <div class="container">
      <div class="row toprowpadding">

          <div class="col-md-6 freeshiptext"> FREE SHIPPING ON ORDERS $30 OR MORE</div>
          <div class="col-md-6 manimailtext"> 
              <div class="manimaildropdown">
                 <span>MANI MAIL SIGN UP <i class="demo-icon porto-icon-down-open-big"></i></span>
                    <div class="manimail-dropdown-content">
                       <form class="form subscribe" action="./newsletter_signup_success" method="post">
                            <div class="field newsletter">
                                <div class="control">
                                  <input name="topeaddr" type="email" id="header_newsletter" placeholder="Subscribe & Save 15%"/>
                                </div>
                            </div>
                            <div class="actions">
                                 <button class="action subscribe primary" id="headersubscribe-button" title="<?php echo __('Subscribe') ?>" type="submit" name="subscribe">
                                    <span><?php echo __('Subscribe') ?></span>
                                 </button>
                            </div>
                       </form>
                    </div>
              </div>
          </div>
      </div>
  </div>

.manimail-dropdown-content{
    right: 0px;
    position: absolute;
}