My dropdown menu isn't showing below parent


Tags: html,css,dropdown

Problem :

I'm creating a dropdown login form, but once the jQuery is working right, I get the menu displayed at left (when Log in is at right). Some images to see it clearly:

1]

And when I click on 'Log in':

enter image description here

It loads this way. Here's the code:

HTML:

<div id="navthing">
  <h2><a href="#" id="loginform">Log in</a> | <a href="#">Sign Up</a></h2>
  <div class="login">
    <div class="arrow-up"></div>
    <div class="formholder">
      <div class="randompad">
        <fieldset>
          <label name="email">Email</label>
          <input type="email" value="example@example.com" />
          <label name="password">Password</label>
          <input type="password" />
          <input type="submit" value="Login" />
        </fieldset>
      </div>
    </div>
  </div>
</div>

And CSS:

#navthing {
  text-align: right;
  padding: 0.5em;
}

.login {
  position: absolute;
  width:250px;
  display:none;
  z-index: 9999;
}

.formholder {
  background: #ecf0f1;
  width: 250px;
  border-radius: 5px;
  padding-top: 5px;
  z-index: 1;
  display:block;
}

.arrow-up {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 15px solid #ECF0F1;
  left: 10%;
  position: absolute;
  top: -10px;
}

.formholder input[type="email"], .formholder input[type="password"] {
  padding: 7px 5px;
  margin: 10px 0;
  width: 96%;
  display: block;
  font-size: 18px;
  border-radius: 5px;
  border: none;
  -webkit-transition: 0.3s linear;
  -moz-transition: 0.3s linear;
  -o-transition: 0.3s linear;
  transition: 0.3s linear;
}

.formholder input[type="email"]:focus, .formholder input[type="password"]:focus {
  outline: none;
  box-shadow: 0 0 1px 1px #1abc9c;
}
.formholder input[type="submit"] {
  background: #1abc9c;
  padding: 10px;
  font-size: 20px;
  display: block;
  width: 100%;
  border: none;
  color: #fff;
  border-radius: 5px;
}
.formholder input[type="submit"]:hover {
  background: #1bc6a4;
}

.randompad {
  padding: 10px;
}

.green {
  color: #1abc9c;
}

a {
  color: #ecf0f1;
  text-decoration: none;
}
a:hover {
  color: #1abc9c;
}

jsfiddle

I got the .login's position in absolute because if not the menu made the darkblue div bigger. How could I display the menu (the arrow and the rest of the form) below 'log in'? I'm trying but with no result. Thank you.



Solution :

If you want this block to be in absolute position relative to this link, you have a couple of choices.

One, you keep this structure and put a relative position to the parent, header and then you position it.

Or you put this block in the container of the link itself and add a position:relative; to the container of the link.

I choose the first way to do it and here is the JsFiddle

The code that change :

.login {
    position: absolute;
    width:250px;
    display:none;
    z-index: 9999;
  right: 50px;
  top:40px
}
.arrow-up {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 15px solid #ECF0F1;
  right: 10%;
  position: absolute;
  top: -10px;
}
header {
    width:90%;
    height:30%;
    margin: 0 auto;
    background-color:darkblue;
    color:white;
    /*text-align:center;*/
    z-index: 8;
    position:relative; /* I add this line to make it works */
}

    CSS Howto..

    CSS: How to toggle switch action on the link?

    How can I include a HTML-encoded “content:” character in CSS? [duplicate]

    How do I let a div fill in the blank space

    How to convert UPPERCASE text to Title Case using CSS

    how to get the site to not collapse with css

    How to make hover using jquery without CSS?

    How can I fix the indentation in a facebook like-box?

    How to get an image to resize on scroll?

    How to implement CSS multi-level drop down menu with different classes?

    tooltip box not showing using css

    Jquery: How to check if the element has certain css class/style

    how to select :after element using jquery

    CSS - How to remove unwanted margin between elements?

    How to add CSS to ASP.NET site with WebOptimization and Bundling

    Once I've designed a navigation bar using CSS & html — how can I put the html code in one place so it shows in each window? [duplicate]

    how to change the cssclass of a div after press a button in asp.net c#?

    How to show/hide hidden HTML table rows using JavaScript (no jQuery)

    JavaScript: How to get a dynamically created element's width?

    How do I select immediate children in jQuery [closed]

    How to fix internet explorer 9 overflow with form elements displayed in a list and “display:table”-based layout

    How can I separate and make a menu with these links in CSS without using unordered lists [closed]

    CSS border - how to populate content inside div with border

    How to set border between two products in css?

    How to add custom CSS/JS to Grails 2.4.x layouts/templates?

    How to blur a banner photo in CSS Style?

    How can i use the visibility attribute in css to make my submenu appear and reappear?

    How does a browser determine which cursor to use if multiple are set via CSS?

    Twitter boostrap and css: How to remove the modal overlay and refocus on the input box, so the users can type with the modal open

    How to stretch container div from header to footer with html/css?

    How to make a background with 2 gradients in CSS