我试图制作一个带有导航栏和表单的网页。在我的菜单中我有下拉菜单，但问题是当我悬停在下拉菜单的链接上方并且鼠标指针也在触摸顶部的表单时，下拉菜单就消失了。只有当我将表单的Z-索引设置为-1时，它才起作用，而当我将下拉菜单的Z-索引设置为10和表单的Z-索引设置为1时，它就不起作用了。为什么？ 以下是html代码:

null

body {
  margin: 0;
  padding: 0;
}

.main-nav {
  position: fixed;
  width: 100%;
  height: 50px;
  background: #212121;
}

.nav_stub {
  width: 100%;
  height: 50px;
  visibility: hidden;
}

.main-menu {
  margin: 0;
  padding: 0;
  list-style-type: none;
  height: 100%;
  width: 100%;
}

.main-menu li {
  position: relative;
  height: 100%;
  display: inline-block;
  margin-left: 10px;
}

.main-menu li a {
  display: block;
  box-sizing: border-box;
  padding: 10px;
  text-decoration: none;
  height: 100%;
  line-height: 30px;
  text-align: center;
  color: #fff;
  transition: 0.5s;
}

.main-menu li a:hover {
  color: #000;
  background: #fff;
}

.boxA {
  width: 100%;
  height: 100vh;
}

.dropdown_content {
  width: 100%;
  position: absolute;
  background: #212121;
  top: 100%;
  display: none;
  padding: 0;
}

.dropdown_content li {
  margin: 0;
  display: block;
}

.dropdown:hover .dropdown_content {
  display: block;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}

.dropdown {
  z-index: 10;
}


/* forms */

.myform {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  width: 50%;
  box-sizing: border-box;
  margin: auto;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3), -5px -5px 10px rgba(0, 0, 0, 0.3);
  ;
  border-radius: 10px;
  z-index: 1;
}

<nav class="main-nav">
  <ul class="main-menu">
    <li><a href="index.html">Home</a></li>
    <li class="dropdown">
      <a href="#">Sign In/Sign Up</a>
      <ul class="dropdown_content">
        <li> <a href="signIn.html">Sign In</a> </li>
        <li> <a href="signUp.html">Sign Up</a> </li>
      </ul>
    </li>
    <li><a href="#">About Franklin's Diary</a></li>
    <li class="dropdown">
      <a href="#">Sign In/Sign Up</a>
      <ul class="dropdown_content">
        <li> <a href="signIn.html">Sign In</a> </li>
        <li> <a href="signUp.html">Sign Up</a> </li>
      </ul>
    </li>
  </ul>
</nav>
<div class="nav_stub">

</div>

<form class="myform" action="index.html" method="post">
  <h2 class="form_header">Sign Up</h2>
  <div class="input_container">
    <label class="form_label" for="username">Username:</label>
    <input class="form_input" type="text" name="username" id="username" placeholder="Username...">
    <span class="tooltip_text">Username Must Be At Leat 8 Characters Long</span>
  </div>
  <div class="input_container">
    <label for="password" class="form_label">Password:</label>
    <input class="form_input" type="password" name="password" id="password" placeholder="Password...">
    <span class="tooltip_text">Password Must Be At Least 10 Characters Long,Containing One Upper-Letter And
            One Special Character</span>
  </div>
  <div class="input_container">
    <label for="passwordCheck" class="form_label">Password(again):</label>
    <input class="form_input" type="password" name="passwordCheck" id="passwordCheck" placeholder="Password...">
  </div>
  <div class="input_container">
    <label class="form_label" for="firstName">First Name:</label>
    <input class="form_input" type="text" name="firstName" id="firstName" placeholder="Bob">
  </div>
  <div class="input_container">
    <label class="form_label" for="lastName">Last Name:</label>
    <input class="form_input" type="text" name="lastName" id="lastName" placeholder="Marley">
  </div>
  <div class="input_container">
    <button type="submit" name="button" class="form_btn">Sign Up</button>
  </div>
</form>

null