所以我一直在为我和我的朋友制作一个网站，供他们在学校使用，因为他们阻止了一切，所以我制作了自己的聊天系统等。我正在寻找一些帮助来修复我的导航栏下拉菜单，目前根本不起作用，但 php 中有标签，有人可以看看是否有很棒的修复程序！ 希望这篇文章的答案对寻找相同功能的其他人有用！
标头.php
@charset "UTF-8";
@import "https://fonts.googleapis.com/css?family=Montserrat";
/* ===========================================
Titles
============================================ */
.title, div.title, .title-left {
text-transform: uppercase;
padding: 40px 0 0 0;
color: #6C6C6C;
margin: 0; }
div.title, div.title-left {
padding: 20px 0; }
.title-left {
text-align: left; }
/* ===========================================
Buttons
============================================ */
.button, .button-primary {
border-radius: 100px;
font-weight: normal;
padding: 15px 30px;
border: 0; }
.button-primary {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
-webkit-transition: 700ms background ease-in-out;
transition: 700ms background ease-in-out;
background: #1DB2E3;
color: #FFFFFF; }
.button-primary:hover {
background: #333E4F; }
/* ===========================================
Main Navigation
============================================ */
#main-navigation {
background: rgba(0, 0, 0, 0.25);
min-height: 90px;
z-index: 999;
}
#main-navigation .navigation-left {
padding: 37px 0;
float: left; }
#main-navigation .navigation-left a.logo {
text-transform: uppercase;
font-size: 30px;
color: #FFFFFF; }
#main-navigation .navigation-left a.logo img {
margin-top: 0px;
height: 60px; }
#main-navigation .hamburger-menu {
height: 20px;
position: absolute;
width: 30px;
margin: auto;
right: -70%;
bottom: 0;
left: 0;
top: 0; }
#main-navigation .bar,
#main-navigation .bar:after,
#main-navigation .bar:before {
height: 2px;
width: 30px; }
#main-navigation .bar {
-webkit-transform: translateY(9px);
transform: translateY(9px);
background: white;
-webkit-transition: all 0ms 300ms;
transition: all 0ms 300ms;
position: relative; }
#main-navigation .bar.animate {
background: rgba(255, 255, 255, 0); }
#main-navigation .bar:before {
-webkit-transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
background: white;
bottom: 9px;
position: absolute;
content: "";
left: 0; }
#main-navigation .bar:after {
-webkit-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
background: white;
position: absolute;
top: 9px;
content: "";
left: 0; }
#main-navigation .bar.animate:before {
-webkit-transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
bottom: 0; }
#main-navigation .bar.animate:after {
-webkit-transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 0; }
#main-navigation .navigation-right {
padding: 37px 0;
display: none;
float: right; }
#main-navigation .navigation-right .item {
font-weight: normal;
margin-right: 15px;
color: #FFFFFF; }
@media (min-width: 480px) {
#main-navigation .navigation-right {
display: block; }
#main-navigation .hamburger-menu {
display: none; } }
.navigation-right.active {
display: block !important;
background: transparent;
position: absolute;
margin-top: 95px;
height: 352px;
z-index: 999;
width: 100%;
left: 0;
top: 0; }
.navigation-right.active a {
text-align: center;
padding: 16px 0;
display: block; }
.navigation-right.active .button-primary {
margin: 0 auto;
width: 70%; }
.dropdown {
display: none;
margin-right: 60px;}
.dropdown.active {
background: rgba(0, 0, 0, 0.25);
display: block !important; }
.dropdown.active a {
border-bottom: 1px dashed #AAAAAA;
padding: 10px 0;
display: block;
color: #FFFFFF; }
.dropdown.active a:last-child {
border: 0; }
@media (min-width: 480px) {
.dropdown.active {
position: absolute;
padding: 15px 20px;
margin-top: 34px;
margin-left: 16em;
} }
/* OTHER */
body {
background-color: #3d3d3d;
}
html {
font-family: sans-serif;
/* 1 */
line-height: 1.15;
/* 2 */
-ms-text-size-adjust: 100%;
/* 3 */
-webkit-text-size-adjust: 100%;
}
a {
text-decoration: none;
}<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>MopedBoyz</title>
<link rel="icon" href="img/mopedIcon.ico">
<link rel="stylesheet" href="css/nav.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div id="main-navigation" class="animated bounceInDown">
<div class="inner">
<div class="navigation-left">
<a href="index.php" class="logo bold">MopedBoyz</a>
</div>
<div class="hamburger-menu">
<div class="bar"></div>
</div>
<div class="navigation-right">
<a href="index.php" class="item">Links</a>
<a href="chat.php" class="item">Chat</a>
<a href="login.php" class="item">Login</a>
<a href="register.php" class="item">Register</a>
<a href="usercp.php" class="item">Settings</a>
<a href="#" class="item hosting-dropdown">Account
<i class="fa fa-caret-down"></i></a>
<li class="dropdown">
<a href="login.php">Login</a>
<a href="register.php">Register</a>
<a href="usercp.php">Settings</a>
<a href="sys/logout.php">Logout</a>
</li>
<a href="sys/logout.php" class="button-primary">Logout</a>
</div>
</div>
</div>
如果很难阅读你的 3000 行 css 代码，但我给你做了一个工作的例子。你可以在jsFiddle上找到它。
我认为您应该按如下方式构建"下拉"容器：
<ul class="dropdown">
<li><a href="login.php">Login</a></li>
<li><a href="register.php">Register</a></li>
<li><a href="usercp.php">Settings</a></li>
<li><a href="sys/logout.php">Logout</a></li>
</ul>
如上所述，"li"标签应放置在"ul"内。
整个"下拉列表">容器应放置在"托管下拉列表"中，该下拉列表打开和关闭"下拉列表"。因此，您可以调整"下拉"容器相对于"托管下拉"按钮的位置。
<div id="dropdown" class="item hosting-dropdown">
<span>Account<i class="fa fa-caret-down"></i></span>
<ul class="dropdown">
<li><a href="login.php">Login</a></li>
<li><a href="register.php">Register</a></li>
<li><a href="usercp.php">Settings</a></li>
<li><a href="sys/logout.php">Logout</a></li>
</ul>
</div>
下拉菜单打开和关闭可以通过一个小的jQuery函数实现：
$('document').ready(function() {
$('#dropdown').click(function() {
$(this).toggleClass('opened');
})
})
和 CSS：
.hosting-dropdown {
display: inline-block;
margin-left: 10px;
position: relative;
cursor: pointer;
}
.dropdown {
position: absolute;
right: 0;
top: 55px;
background-color: rgba(0, 0, 0, 0.4);
padding: 15px;
margin: 0;
display: none;
}
.hosting-dropdown.opened .dropdown {
display: block;
}
.dropdown li {
list-style: none;
padding: 5px 0;
}
.main-navigation {
position: fixed;
top: 0;
left: 0;
width: 100%;
float: left;
}
.content {
height: 2000px;
width: 100%;
background-color:#fff
}
#main-navigation .navigation-left {
padding: 27px 0;
}
#main-navigation .navigation-right{
padding: 35px 0;
}
如果您有任何问题，请与我联系。