Confused with css/html for creating dropdown menu - html

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>Home</li>
<li class="dropdown">
Sign In/Sign Up
<ul class="dropdown_content">
<li> Sign In </li>
<li> Sign Up </li>
</ul>
</li>
<li>About Franklin's Diary</li>
<li class="dropdown">
Sign In/Sign Up
<ul class="dropdown_content">
<li> Sign In </li>
<li> Sign Up </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>Home</li>
<li class="dropdown">
Sign In/Sign Up
<ul class="dropdown_content">
<li> Sign In </li>
<li> Sign Up </li>
</ul>
</li>
<li>About Franklin's Diary</li>
<li class="dropdown">
Sign In/Sign Up
<ul class="dropdown_content">
<li> Sign In </li>
<li> Sign Up </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>