Question

我有一个基于html / CSS的下拉列表，出现在hovereover上。然而，正在发生的事情是，当你将鼠标悬停在链接上时，它会使得下拉存在的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。事实上，这就是你所需要的。您可能需要进行一些调整，通过将其设置为0px，使菜单全部显示在屏幕上。

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

＆＃13;

.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; }

＆＃13;

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

＆＃13;

使CSS下拉显示在div

1 个答案: