html - 使 CSS 下拉列表出现在 div 上

Question

我有一个基于 html/CSS 的下拉菜单，它会在悬停时出现。然而发生的事情是，当您将鼠标悬停在链接上时，它会使存在下拉列表的 div 的高度变大，并且基本上迫使其余内容被推到页面下方。但是，我想要的是当您将鼠标悬停在下拉菜单上时，内容不会被下推。

这是JsFiddle上的代码 link to code

CSS

.topinfobar { background-color:#000000; color:#ffffff; }
.toprowpadding { padding-top:8px; padding-bottom:8px; }
.freeshiptext { padding-left:25px; }
.manimailtext { text-align:right; padding-right:35px; }

.manimaildropdown { position: relative; display: inline-block; } 
.manimail-dropdown-content { display: none; /* position: absolute; */ background-color: #f9f9f9; min-width: 336px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 6px 22px; z-index: 999999;
/* margin-left: -150%; */ height: 50px; }

.manimaildropdown:hover .manimail-dropdown-content { display: block; }
#header_newsletter { width: 60%; float: left; color:#000000; }
#headersubscribe-button { float:right; }
#headersubscribe-button, #headersubscribe-button:hover { background-color:#9C162C; color:#ffffff; }

HTML

   <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>

Answer 1

我看到您已经在manimail-dropdown-content 中注释掉了position: absolute。事实上，这正是您所需要的。您可能需要做一些调整，通过将 right 设置为 0px 使您的菜单显示在屏幕上。

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

.topinfobar { background-color:#000000; color:#ffffff; }
.toprowpadding { padding-top:8px; padding-bottom:8px; }
.freeshiptext { padding-left:25px; }
.manimailtext { text-align:right; padding-right:35px; }

.manimaildropdown { position: relative; display: inline-block; } 
.manimail-dropdown-content { display: none;     right: 0px;
    position: absolute; background-color: #f9f9f9; min-width: 336px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 6px 22px; z-index: 999999;
/* margin-left: -150%; */ height: 50px; }

.manimaildropdown:hover .manimail-dropdown-content { display: block; }
#header_newsletter { width: 60%; float: left; color:#000000; }
#headersubscribe-button { float:right; }
#headersubscribe-button, #headersubscribe-button:hover { background-color:#9C162C; color:#ffffff; }

<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>