1. 首頁
  2. 問答
  3. 我的下拉菜單沒有在父母的下方顯示

我的下拉菜單沒有在父母的下方顯示

2016-04-07 97 views
0

我創建了一個下拉式登錄表單，但是一旦jQuery正常工作，我會在左側顯示菜單（當登錄時在右側）。有些圖片清楚地看到它：我的下拉菜單沒有在父母的下方顯示

1]

當我 '登錄' 點擊：

enter image description here

它加載這種方式。下面的代碼：

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

我得到了.login的position在absolute，因爲如果不是菜單進行的darkblue DIV大。如何在「登錄」下顯示菜單（箭頭和表格的其餘部分）？我嘗試但沒有結果。謝謝。

來源

2016-04-07 Jim

+1

可以使小提琴？ –

+0

請給出完整的代碼或製作它的片段。 –

+0

它顯示在這裏：https://jsfiddle.net/gx35L38z/ – Jim

回答

1

如果你想這一塊是在absolute位置relative這個環節，你有一對夫婦的選擇。

一，你保持這種結構，並把一個相對位置的父母，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

2

如果我正確理解你的問題，你試圖將你的菜單放在導航欄的右側。如果是這樣，您只需要添加正確的位置，通過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

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'); 
 
    } 
 
}); 
 
});
* { 
 
\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

0 
.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

相關問題

 相關問題