私はドロップダウンログインフォームを作成していますが、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;
}
メニューがdarkblue
div要素を加えた場合ではないので、私はabsolute
で.login
のposition
を得ましたより大きい。 「ログイン」の下にあるメニュー(フォームの残りの部分)をどのように表示できますか?私は努力しているが結果はない。ありがとうございました。
をあなたはバイオリンを作ることができますか? –
完全なコードを入力してください。 –
これは次のように表示されています:https://jsfiddle.net/gx35L38z/ – Jim