您好，我有一个调整大小的问题：
网站：Thelazylife.nl
HTML
<body>
<div class="headerContainer">
<div id="nav" class="nav">
<div class="logo">Logo</div>
<span onclick="abc()"><i class="fa fa-bars"></i></span>
<ul id="toggle">
<li>Home</li>
<li>Over</li>
<li>Contact</li>
<li>Locatie</li>
</ul>
</div>
<div class="box1">
Box 1
</div>
<div class="box2">
Box 2
</div>
<div class="box3">
Box 3
</div>
</div>
</body>
CSS
body{
padding:0;
margin:0;
}
.headerContainer{
height:100vh;
display:grid;
position: relative;
grid-template-columns: 1fr 1fr;
grid-template-rows: 50px 1fr 1fr;
grid-template-areas:
"navigation navigation"
"box1 box2"
"box3 box3"
;
}
.nav{
grid-area:navigation;
display: flex;
align-items: center;
justify-content: space-around;
background-color: red;
}
.nav ul li:hover{
background-color:orange;
}
.nav ul{
display:flex;
list-style-type: none;
}
.nav ul li {
padding:20px;
background-color: green;
margin-left:20px;
}
i.fa{
display:none;
font-size:22px;
}
.logo{
font-size:22px;
}
.box1{
grid-area:box1;
background:blue;
}
.box2{
grid-area:box2;
background:green;
}
.box3{
grid-area:box3;
background:yellow;
}
@media screen and(max-width: 600px) {
body{
margin:0;
padding:0;
}
.nav ul {
display:none;
position: absolute;
flex-direction:column;
top:25px;
right:0;
width:300px;
}
.nav ul li:hover{
background-color:orange;
}
i.fa{
display:block;
}
}
JS
function abc(){
var x = document.getElementById("toggle");
if(x.style.display == 'block')
x.style.display = 'none';
else
x.style.display = 'block';
}
刚开始时看起来很丑，但是菜单出了问题。重新创建问题的步骤：将浏览器的大小调整为小于600像素，然后再次将浏览器的大小调整为桌面视图。菜单消失了。同样，当调整大小到移动视图然后打开菜单然后调整浏览器大小时，也会使菜单保持在列模式。
如何解决此问题？
致谢，并感谢您的提前帮助！