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>

Setting a negative Z-index places the element behind the `body`. You need a positive z-index. [Further Reading](https://stackoverflow.com/questions/33217407/css-negative-z-index-what-does-it-mean). I would also recommend adding a padding-top to the body element of 50px to clear the main menu — jbutler483, Jul 05 '20 at 12:33
Hint: alot of `code` needs to be improved in your CSS to work with modern web browsers and responsivness. — Always Helping, Jul 05 '20 at 12:45
@jbutler483 , thank you for explaining the negative z-index.Also thanks for the padding idea.Before i used an empty div to cover the fixed area. — Barracuda, Jul 05 '20 at 12:47

score 2 · Accepted Answer · answered Jul 05 '20 at 12:38

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>

Thank you.It worked after setting the z-index of my nav,but i don't quite understand why.Could you explain it? — Barracuda, Jul 05 '20 at 12:45
@Barracuda z-index is not only the issue here: Hint: alot of code needs to be improved in your CSS to work with modern web browsers and responsivness. — Always Helping, Jul 05 '20 at 12:46
@AlwaysHelping if you have any suggestions(books,articles,ect),i would appreciate it. — Barracuda, Jul 05 '20 at 12:49
Wen you set z-index property for an element with a value more than the z-index of another, it locates at a topper position in comparison of the other element. something like layers on the top of another layer @Barracuda — Saeed Jamali, Jul 05 '20 at 12:49
Exactly . @AlwaysHelping is right. your code needs improvements. the w3schools help you. https://www.w3schools.com/ — Saeed Jamali, Jul 05 '20 at 12:51
@SaeedJamali , i am confused a little bit because i set the z-index of the drop-down menu(10) bigger than the z-index of form(1),but that didn't work.While setting the navbar to a bigger z-index than the form worked. — Barracuda, Jul 05 '20 at 12:52
The z-index property works with position. I mean your element must have position value to accept z-index. — Saeed Jamali, Jul 06 '20 at 04:17

Confused with css/html for creating dropdown menu

1 Answers1