My dropdown menu isn't showing below parent - html

Question

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:
And when I click on 'Log in':
It loads this way. Here's the code:
HTML:
<div id="navthing">
<h2>Log in | Sign Up</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.

Answer 1

If I correctly understand your question, you are trying to position your menu at the right side of navbar. If so, you just need to add correct position to it, by right or left properties. I've also change arrow position and add position:relative to your #navthing.
$( document ).ready(function() {
$('input[type="submit"]').mousedown(function(){
$(this).css('background', '#2ecc71');
});
$('input[type="submit"]').mouseup(function(){
$(this).css('background', '#1abc9c');
});
$('#loginform').click(function(){
$('.login').fadeToggle('slow');
$(this).toggleClass('green');
});
$(document).mouseup(function (e)
{
var container = $(".login");
if (!container.is(e.target)
&& container.has(e.target).length === 0)
{
container.hide();
$('#loginform').removeClass('green');
}
});
});
* {
margin:0;
padding:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Roboto', Arial, Tahoma;
font-size: 62.5%;
background: #242c38;
}
#navthing {
text-align: right;
position:relative;
padding: 0.5em;
}
.login {
position: absolute;
right: 52px;
top: 41px;
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;
right: 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;
}
header {
width:90%;
height:30%;
margin: 0 auto;
background-color:darkblue;
color:white;
/*text-align:center;*/
z-index: 8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div id="navthing">
<h2>Log in | Sign Up</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>
</header>

Answer 2

Do You want like this?
$( document ).ready(function() {
$('input[type="submit"]').mousedown(function(){
$(this).css('background', '#2ecc71');
});
$('input[type="submit"]').mouseup(function(){
$(this).css('background', '#1abc9c');
});
$('#loginform').click(function(){
$('.login').fadeToggle('slow');
$(this).toggleClass('green');
});
$(document).mouseup(function (e)
{
var container = $(".login");
if (!container.is(e.target)
&& container.has(e.target).length === 0)
{
container.hide();
$('#loginform').removeClass('green');
}
});
});
* {
margin:0;
padding:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Roboto', Arial, Tahoma;
font-size: 62.5%;
background: #242c38;
}
#navthing {
text-align: right;
padding: 0.5em;
}
.login {
position: absolute;
width:250px;
display:none;
z-index: 9999;
right:40px;
}
.formholder {
background: #ecf0f1;
width: 250px;
border-radius: 5px;
padding-top: 5px;
z-index: 1;
display:block;
margin-top:15px;
}
.arrow-up {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 15px solid #ECF0F1;
left: 41%;
position: absolute;
top: 0px;
}
.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;
}
header {
width:90%;
height:30%;
margin: 0 auto;
background-color:darkblue;
color:white;
/*text-align:center;*/
z-index: 8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div id="navthing">
<h2>Log in | Sign Up</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>
</header>

Answer 3

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 */
}

Answer 4

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