下拉菜单阻止了我的导航登录表单

Question

我有以下下拉菜单，展开后似乎阻止了我的登录表单，如下图所示。我不确定是否应该使用Codepen，但是无论如何，这是我的CSS代码：

.nav {
  width: 200%;



}

#nav-icon {
  font-size: 28px;
  line-height: 50px;
  padding-left: 1em;
  color:  #ffffff;
  background-color: #f44336;
}

div.nav ul, div.nav li, label{
  line-height: 50px;
  margin: 0;
  padding: 0 2em;
  list-style: none;
  text-decoration: none;
  color: #000;
  font-weight: 100;
  width: 100%;
  position: relative;


}

div.nav ul {
  position: relative;
  z-index: 10;
}

header div.nav-login{
   float:left;
   position: absolute;
   left: 90em;
   top: 5.5em;

}


header div.nav-login ::placeholder {
   color: #6A5ACD;
   opacity: 1;

}

header div.nav-login input[type='password'] {
  position: absolute;
  left: 130px;
}

header div.nav-login input[type='password']::placeholder {
  position: relative;
  left: 1em;
}

 header div.nav-login form{
    padding-top: 40px;

}

header div.nav-login form input{
   float:left;
   width: 8em;
   height: 3em;
   padding-left: 5px;
   margin-right: 10px;
   border:none;
   background-color: #ccc;
   font-family: arial;
   font-size: 14px;
   color: #111;
   line-height: 20px;
   position: absolute;
}

header div.nav-login form button{
   float:left;
   width: 60px;
   height: 30px;
   margin-right: 10px;
   border:none;
   background-color: #FFF8DC;
   font-family: arial;
   font-size: 14px;
   color: #111;
   cursor:pointer;
   position: absolute;
   left: 19em;
   top: 3.2em;

}

header div.nav-login form button:hover{
   background-color: #ccc;

}

这些是我在该部分中大部分的代码，我绝对需要z索引在其中，以便它不会出现在我的表后面，但是现在当下拉菜单展开时，我无法使用登录表单。 ... enter image description here