Html CSS burger menu

Здравствуйте всем , вопрос : можно ли без js и сложных тегов сделать бургер меню рабочим, например с помощью ховера ( не обязательно кликать , нужно что бы просто отображалось )
Есть готовый код кто разбирается пожалуйста подскажите каким образом можно написать

* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;

}



header {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 100px;
background-color: blue;
color:#fff ;
padding: 0 40px;
}
.logo {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border-radius: 50%;
border: 4px solid #ddd;
width: 90px;
height: 90px;
padding: 15px;
}

.nav {
display: flex;
width: 700px;
padding: 0 40px;
}
.nav ul {
width: 100%;
list-style: none;
display: flex;
justify-content: space-between;

}


.burger {
display: none;
position: relative;
z-index: 50;
align-items: center;
justify-content: flex-end;
width: 30px;
height: 18px;
}

.burger span{
height: 2px;
width: 80%;
transform: scale(1);
background-color: #fff;
}

.burger::before, .burger::after {
content: "";
position: absolute;
height: 2px;
width: 80%;
background-color:#fff;
/*transition: all 0.3s ease 0s;*/
}

.burger::before {top: 0;}
.burger::after {bottom: 0;}






@media (max-width:600px) {
.burger {display: flex;}

.nav {
display: none;
flex-direction: column;
position: fixed;

height: 100%;
width: 300px;
top: 0; bottom: 0; left: unset; right: 0;
z-index: 50;
overflow-y: auto;
padding: 90px 50px;
background-color: black;

}

.nav ul {
flex-direction: column;
row-gap: 30px;
align-items: center;
}
}