html - 与用于创建下拉菜单的 css/html 混淆

Question

我正在尝试制作一个带有导航栏和表单的网页。在我的菜单中，我有下拉菜单，但问题是当我将鼠标悬停在下拉菜单的链接上方并且鼠标指针也触及顶部表单时，下拉菜单消失了。它仅在我将表单的 z-index 设置为 -1 时起作用，但在我将下拉菜单的 z-index 设置为 10 并将表单的 z-index 设置为 1 时不起作用。为什么？
这是html代码:

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

您的问题有简单的解决方案。只需设置一个 z-index到您的导航栏，如下所示。

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