我有一个网格布局，它有三行：页眉、内容和页脚。在"页眉"行中，我创建了一个下拉登录框来替换当前的登录表单。问题是该框被截断或没有显示在"网格布局内容"行上。它只显示在Header行中，所以我只看到它的一部分，因为下拉登录太大了，只适合Header行
* {
margin: 0;
padding: 0;
}
body {
font-family: Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
background-color: #3399FF;
font-size: 1rem;
font-weight: 400;
color: #858796;
}
/*-- Main grid view --*/
.main-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas: "header header" "content content" "footer footer";
}
.header {
grid-area: header;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
background-image: url(../img/image1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.content {
grid-area: content;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
background-image: url(../img/image2.png);
background-size: cover;
background-repeat: no-repeat;
background-position: 5% 5%;
border-radius: 4px;
}
.login-dropdown {
display: block;
float: right;
color: white;
text-align: center;
text-decoration: none;
}
.login-dropdown-content {
position: absolute;
width: 300px;
height: 100px;
right: 100px;
top: 52px;
background-color: #fff;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 1px;
}
.dropdown-arrow {
width: 0;
height: 0;
position: absolute;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #fff;
right: 29px;
top: 42px;
}
.footer {
grid-area: footer;
display: grid;
grid-template-columns: 1fr 30% 1fr;
grid-template-rows: auto;
grid-template-areas:
"login-footer-grid login-footer-grid login-footer-grid"
}
.login-footer-grid {
grid-area: login-footer-grid;
align-self: center;
max-height: calc(100vh + 10px);
left: 1%;
right: 1%;
font-family: Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
font-size: 1rem;
font-weight: 200;
color: #FFFFFF;
margin-right:auto;
margin-left:auto;
bottom: 0;
}
.login-topnav {
list-style-type: none;
position: relative;
margin: 0;
padding: 2px 0 1px 0;
overflow: hidden;
display: block;
background-color: rgb(50,53,57,0.2); /*rgb(199,221,113,1); */
}
li a {
display: block;
color: white;
text-align: center;
padding: 20px 28px 20px 28px;
text-decoration: none;
}
.login-form {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
width: 400px;
height: 300px;
padding: 50px 20px 30px 20px;
background-color: rgb(15,15,15,0.6);
border-radius: 4px;
}
.login-form h2 {
margin: 0;
padding: 0 0 20px;
color:#fff;
text-align: center;
}
.float-right {
float: right;
}
.float-left {
float: left;
}
/* Hover styles */
li a:hover {
background-color: #FF7104;
}<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="./css/test.css">
</head>
<body>
<!-- Main grid layout -->
<div class="main-grid">
<!-- First grid row -->
<div class="header">
<!-- Logo containing navbar-->
<ul class="login-topnav">
<!-- New Dropdown user login element on navbar -->
<li class="login-dropdown">
<a class="btn btn-primary"><i class="fa fa-user fa-fw"></i>Login</a>
<div class="dropdown-arrow"></div>
<div class="login-dropdown-content">
<form>
<input type="text" placeholder="Username.." name="unam" id="unam" required>
<input type="text" placeholder="Password.." name="pwd" id="pwd" required>
</form>
</div>
</li>
</ul>
</div>
<!-- Second grid row -->
<div class="content">
<!-- Login form to replace -->
<div class="login-form animate" >
<form action= "" method="post">
</form>
<form action= "" method="post">
</form>
</div>
</div>
<!-- Third grid Row -->
<div class="footer">
</div>
</body>
</html>我尝试为.login-dropdown-content设置一个z-index，但没有帮助
有人能告诉我如何解决这个问题的正确方向吗？
.login-topnav中有overflow: hidden，它隐藏了溢出的下拉列表。
删除overflow属性并给它一个固定的height应该会有所帮助：
Fiddle：https://jsfiddle.net/q9c3hxgm/