我正在与一些朋友在一个网站上工作以获得乐趣，我们在按下按钮后导航菜单没有出现问题，我不得不使用flexbox将我的汉堡菜单与原来的导航栏对齐，但是现在当我们按它时，它根本不显示任何子菜单。
是的，我们意识到webkit是针对scss的，它只是用于示例
.topnav {
flex-grow: 1;
max-height: 100px;
}
.navbarItems a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 24px;
}
.navbarItems a:hover {
background-color: darkgray;
color: black;
}
.navbarItems a.active {
background-color: white;
color: white;
}
.container {
display: flex;
flex-wrap: wrap;
align-items: center;
background-color: grey;
}
/* Hambuger Menu */
.burger {
background: none;
outline: 0;
cursor: pointer;
border-top: 4px solid currentColor;
width: 28px;
transition: border-top 0.1s ease-in-out;
-webkit-transition: border-top 0.1s ease-in-out;
}
.burger::-moz-focus-inner {
border: 0;
padding: 0;
}
.burger:before {
content: "";
display: block;
border-top: 4px solid currentColor;
width: 100%;
margin-top: 5px;
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger:after {
content: "";
display: block;
border-top: 4px solid currentColor;
width: 100%;
margin-top: 5px;
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
position: relative;
align-self: center;
}
.burger-check {
display: none;
}
.burger-check:checked ~ .burger {
border-top: 4px solid transparent;
transition: border-top 0.5s ease-in-out;
-webkit-transition: border-top 0.5s ease-in-out;
}
.burger-check:checked ~ .burger:before {
transform: rotate(-405deg) translateY(1px) translateX(-3px);
-webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
align-self: center;
}
.burger-check:checked ~ .burger:after {
transform: rotate(405deg) translateY(-4px) translateX(-5px);
-webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.navigation {
overflow: hidden;
background-color: black;
max-height: 0;
-webkit-transition: max-height 0.5s ease-in-out;
transition: max-height 1.5s ease-in-out;
}
.burger-check:checked ~ .navigation{
overflow: visible;
background-color: purple;
max-height: 100%;
-webkit-transition: max-height 1s ease-in-out;
transition: max-height 1s ease-in-out;
}
p {
background-color: floralwhite;
font-family: 'Libre Baskerville', serif;
font-size: 30px;
text-align: center;
}
body {
background-color: floralwhite;
font-family: 'Libre Baskerville', serif;
font-size: 30px;
text-align: centeR;
}
h1 {
font-family: 'Libre Baskerville', serif;
font-style: italic;
text-align: center;
}
a {
color: inherit;
}
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
font-size: 25px;
padding: 5px 0;
}
li a {
text-decoration: none;
}
li a:hover {
text-decoration: underline;
}
.img {
width:1000px;
height:400px;
}
.header {
width: 322px;
height: 219px;
}
h4 {
font-family: 'Libre Baskerville', serif;
text-align: center;
list-style: square;
}<div class="topnav" id="myTopnav">
<div class="navbarItems">
<a href="/">Home</a>
<a href="/about.php">About</a>
</div>
</div>
<input class="burger-check" id="burger-check" type="checkbox">
<label for="burger-check" class="burger"></label>
</div>
<nav id="navigation1" class="navigation">
<ul>
<li><h1>Professional Awards</h1></li>
<li><a href="Advisor Of The Year Award.php">Advisor of the Year Award</a></li>
<li><a href="/Pages/Professional Awards/Emerging Advisor Of The Year Award.php">Emerging Advisor of the Year Award</a></li>
<li><a href="/Pages/Professional Awards/Emerging Professional Of The Year Award.php">Emerging Professional of the Year Award</a></li>
<li><a href="/Pages/Professional Awards/Hall Of Fame Award.php">Hall of Fame Award</a></li>
<li><a href="/Pages/Professional Awards/Outstanding Service Award.php">Outstanding Service Award</a></li>
<li><a href="/Pages/Professional Awards/Student Of The Year Award.php">Student of the Year</a></li>
<li><h1>Service Learning Awards</h1></li>
<li><a href="/Pages/Service Learning Awards/Community Service Award.php">Community Service Award</a></li>
<li><a href="/Pages/Service Learning Awards/Environmental Action Awareness Award.php">Environmental Action Awareness</a></li>
<li><a href="/Pages/Service Learning Awards/Safety Awareness Award.php">Safety Awareness Award</a></li>
<li><a href="/Pages/Service Learning Awards/Service Learning Individual Award.php">Service Learning Individual Award</a></li>
<li><a href="/Pages/Service Learning Awards/Special Olympics Award.php">Special Olympics Award</a></li>
<li><h1>Special Recognition Awards</h1></li>
<li><a href="/Pages/Special Recognition Awards/BPA Marketing and Public Relations.php">BPA Marketing and Public Relations</a></li>
<li><a href="/Pages/Special Recognition Awards/BPA Merit Scholar.php">BPA Merit Scholar</a></li>
<li><a href="/Pages/Special Recognition Awards/Chapter Activities Award of Excellence.php">Chapter Activities Award of Excellence</a></li>
<li><a href="/Pages/Special Recognition Awards/Membership Explosion Award.php">Membership Explosion Award</a></li>
<li><a href="/Pages/Special Recognition Awards/Recruiter of the Year Award.php">Recruiter of the Year Award</a></li>
<li><a href="/Pages/Special Recognition Awards/Social Media Award.php">Social Media Award</a></li>
<li><a href="/Pages/Special Recognition Awards/The Professional Cup Award.php">The Professional Cup</a></li>
</ul>
</nav>