Confused with css/html for creating dropdown menu

Question

I am trying to make a webpage with a navbar and a form.In my menu i have dropdown menus,but the problem is that when i hover above the links of the dropdown menu and the pointer of the mouse is also touching the top form,the dropdown menu disappears.It worked only when i set the z-index of the form to -1,but not when i set the z-index of the dropdown menu to 10 and the z-index of the form to 1.Why? Here is the html code:

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>

Answer 1

Your problem has simple solution. just set a z-index to your navbar as below .

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

body {
  margin: 0;
  padding: 0;
}

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

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