divの上にCSSドロップダウンが表示される

Question

hovereoverで表示されるhtml/CSSベースのドロップダウンがあります。しかし、何が起こっているのかは、リンク上にマウスを置くと、ドロップダウンが存在するdivが高さが高くなり、基本的に残りのコンテンツがページの下に押し出されるようになります。しかし、私が望むのは、ドロップダウンを取得するためにマウスを動かすと、コンテンツがプッシュダウンされないことです。 manimailで絶対：ここ

は、私はあなたがすでにポジションをコメントアウトていることがわかります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

上のコードであります-dropdown-content。実際、これがあなたが必要とするものです。右を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>