對創建下拉菜單的 css/html 感到困惑

Question

我正在嘗試制作一個帶有導航欄和表單的網頁。在我的菜單中，我有下拉菜單，但問題是當我在下拉菜單鏈接上方的 hover 並且鼠標指針也觸摸頂部表單時，下拉菜單消失了。它僅在我將表單的 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>