我的下拉菜单未显示在父级下方

Question

我正在创建一个下拉登录表单，但是一旦 jQuery 正常工作，我就会在左侧显示菜单（当登录在右侧时）。上几张图看清楚：

当我点击 'Log in' 时：

它以这种方式加载。这是代码：

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>

和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

我在 absolute 中得到了 .login 的 position，因为如果不是这样，菜单会使 darkblue div 变大。我怎样才能在 'log in' 下方显示菜单（箭头和表格的其余部分）？我正在尝试但没有结果。谢谢。

Answer 1

如果我正确理解了你的问题，那么你正试图将菜单放置在导航栏的右侧。如果是这样，您只需要通过 right 或 left 属性为其添加正确的位置。我还更改了箭头位置并将 position:relative 添加到您的 #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><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>
</header>

Answer 2

你想要这样吗？

$( 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><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>
</header>

Answer 3

如果您希望此块位于此 link 的 absolute 位置 relative，您有几个选择。

一，你保留这个结构，并把一个相对于父级的位置，header然后你定位它。

或者你把这个块放在 link 本身的容器中，然后将 position:relative; 添加到 link 的容器中。

我选择第一种方式here is the JsFiddle

改变的代码：

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

我的下拉菜单未显示在父级下方

My dropdown menu isn't showing below parent

html

css

dropdown