【发布时间】：2021-05-02 04:21:45
【问题描述】：
我已经在这里对堆栈溢出的一些问题进行了一些搜索，并测试了一些提到的解决方案，但它并没有解决我的问题。我是编码新手。
我也在网上做了一些研究，但没有找到解决我问题的答案。
-第一个问题已解决-
-下面描述的新问题-
编辑：下拉菜单定位固定，现在是垂直的。但是新的问题是下拉菜单项在我将鼠标悬停在它上面之前很快就消失了。而且我的登录表单似乎没有附加在导航中。请检查我的 css 和代码是否存在冲突或问题。无法修复
这是我的代码：
/*MY CSS CODE*/
* {
text-decoration: none;
box-sizing: border-box;
}
main {
padding-top: 100px;
}
header {
position: fixed;
top: 0;
right: 0;
left: 0;
background-color: #ffcce6;
width: 100%;
height: 100px;
}
header .header-brand {
font-family: Catamaran;
font-size: 24px;
font-weight: 900;
color: #111;
text-transform: uppercase;
display: block;
margin: 0 auto;
text-align: center;
padding: 20px 0px;
}
header nav ul {
display: block;
margin: 0 auto;
width: fit-content;
}
header nav ul li {
display: inline-block;
float: left;
list-style: none;
padding: 0 16px;
}
header nav ul li a {
font-family: Catamaran;
font-size: 16px;
color: #111;
text-transform: uppercase;
}
.dropdown {
float: left;
overflow: hidden;
font-family: Catamaran;
font-size: 16px;
color: #111;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ffe6f3;
flex-direction: column;
/* <--- here add this line */
padding: 0;
/* <--- this will fix the alignment */
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
padding: 12px 8px;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: hotpink;
}
.dropdown:hover .dropdown-content {
display: flex;
/* <-- replace 'block' by 'flex' */
}
/*NAVBAR LOGIN FORM*/
header nav .login-container {
float: right;
padding-top: 20px;
}
header nav .login-container form {
display: inline;
}
header nav input[type=text],
header nav input[type=password] {
padding: 6px;
margin-top: 8px;
font-family: 'New Tegomin', serif;
font-size: 17px;
border: 1px solid #ddd;
border-radius: 5px;
width: 180px;
color: #333;
}
header nav .login-container button {
position: relative;
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-left: 6px;
margin-right: 50px;
background-color: deeppink;
color: white;
font-family: 'New Tegomin', serif;
font-size: 17px;
border: none;
border-radius: 5px;
width: 80px;
cursor: pointer;
}
header nav .login-container button:hover {
background-color: hotpink;
}
header .header-brand {
margin: 31px 0;
text-align: left;
line-height: 38px;
padding: 0 20px 0 40px;
border-right: 3px solid #111;
float: left;
}
header nav ul {
margin: 20px 0px 0px 20px;
float: left;
}
header nav ul li a {
line-height: 60px;
}<body>
<header>
<a href="index.php" class="header-brand">Team-Rocket</a>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="products.php">Products</a></li>
<li class="dropdown">
<a class="dropbtn">Legit Check
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-content">
<li><a href="legitcheck.php">Search by ID</a></li>
<li><a href="memberCheck.php">Search by Username</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropbtn">Member List
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-content">
<li><a href="list-RD.php">Regional Distributors</a></li>
<li><a href="list-PD.php">Provincial Distributors</a></li>
<li><a href="list-CD.php">City Distributors</a></li>
<li><a href="list-RS.php">Reseller</a></li>
<li><a href="list-SRS.php">Sub-Reseller</a></li>
</ul>
</li>
</ul>
<div class="login-container">
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post">
<input type="text" placeholder="Username" name="username">
<input type="password" placeholder="Password" name="pwd">
<button type="submit">Login</button>
</form>
</div>
</nav>
</header>
</body>【问题讨论】：