私のドロップダウンメニューは親の下に表示されていません

私はドロップダウンログインフォームを作成していますが、jQueryが正常に機能したら、メニューが左側に表示されます（ログインは右です）。いくつかのイメージが明確にそれを見るために：私のドロップダウンメニューは親の下に表示されていません

をとするとき、私は 'でログイン' をクリック：それはこの方法をロード

。ここでは、コードです：

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="[email protected]" /> 
      <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

メニューがdarkblue div要素を加えた場合ではないので、私はabsoluteで.loginのpositionを得ましたより大きい。「ログイン」の下にあるメニュー（フォームの残りの部分）をどのように表示できますか？私は努力しているが結果はない。ありがとうございました。

出典

2016-04-07 Jim

をあなたはバイオリンを作ることができますか？ –

完全なコードを入力してください。 –

これは次のように表示されています：https://jsfiddle.net/gx35L38z/ – Jim

あなたは、このブロックは、このリンクにabsolute位置relativeになりたい場合は、選択肢のカップルを持っています。

1つ目は、この構造体を保持して、親に相対位置を入れてheaderとし、それを配置します。

または、このブロックをリンク自体のコンテナに入れ、リンクのコンテナにposition:relative;を追加します。

私はそれを行うための最初の方法を選択し、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 */ 
}

出典

2016-04-07 10:06:03

あなたの質問が正しく理解されている場合は、ナビゲーションバーの右側にメニューを配置しようとしています。その場合は、正しい位置を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'); 
 
    } 
 
}); 
 
});

* { 
 
\t margin:0; 
 
\t padding:0; 
 
\t -webkit-box-sizing: border-box; 
 
\t -moz-box-sizing: border-box; 
 
\t box-sizing: border-box; 
 
} 
 

 
body { 
 
\t font-family: 'Roboto', Arial, Tahoma; 
 
\t font-size: 62.5%; 
 
\t background: #242c38; 
 
} 
 

 
#navthing { 
 
\t text-align: right; 
 
    position:relative; 
 
\t padding: 0.5em; 
 
} 
 

 
.login { 
 
\t position: absolute; 
 
    right: 52px; 
 
    top: 41px; 
 
\t width:250px; 
 
\t display:none; 
 
\t 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 { 
 
\t width:90%; 
 
\t height:30%; 
 
\t margin: 0 auto; 
 
\t background-color:darkblue; 
 
\t color:white; 
 
\t /*text-align:center;*/ 
 
\t 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="[email protected]" /> 
 
      <label name="password">Password</label> 
 
      <input type="password" /> 
 
      <input type="submit" value="Login" /> 
 
      </fieldset> 
 
     </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
</header>

出典

2016-04-07 10:02:17 t1m0n

あなたはこのようにしたいですか？

$(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'); 
 
    } 
 
}); 
 
});

* { 
 
\t margin:0; 
 
\t padding:0; 
 
\t -webkit-box-sizing: border-box; 
 
\t -moz-box-sizing: border-box; 
 
\t box-sizing: border-box; 
 
} 
 

 
body { 
 
\t font-family: 'Roboto', Arial, Tahoma; 
 
\t font-size: 62.5%; 
 
\t background: #242c38; 
 
} 
 

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

 
.login { 
 
\t position: absolute; 
 
\t width:250px; 
 
\t display:none; 
 
\t 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 { 
 
\t width:90%; 
 
\t height:30%; 
 
\t margin: 0 auto; 
 
\t background-color:darkblue; 
 
\t color:white; 
 
\t /*text-align:center;*/ 
 
\t 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="[email protected]" /> 
 
      <label name="password">Password</label> 
 
      <input type="password" /> 
 
      <input type="submit" value="Login" /> 
 
      </fieldset> 
 
     </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
</header>

出典

2016-04-07 10:02:36

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

出典

2016-04-07 18:16:29 Bhimbim

私のドロップダウンメニューは親の下に表示されていません

答えて

関連する問題