CODEWITHSUNDEEP
htmlcss
Jayreis
Jayreis

Reputation: 287

Make CSS Dropdown appear over a div

I have a html/CSS based dropdown that appears upon hovereover. However what is happening is when you hover over the link it makes the div the dropdown exists in get bigger in height and basically forcing the rest of the content to be pushed down the page. However what I want is the content not to be pushed down when you hover over to get the drop down.

Here is the code on 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>

Upvotes: 0

Views: 129

Answers (1)

orabis
orabis

Reputation: 2809

I can see that you already commented out the position: absolute in manimail-dropdown-content. In fact, this is what you need. You may need to do a little bit of adjusting to make your menu appears all on screen by setting right to 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>

Upvotes: 1

Related Questions