creating a drop down multi level menu - html

Question

I wanted to create a multi level menu. I have seen yesterday the following page that I would love to do:
https://sbaueraz.github.io/
So I have been watching yesterday some tutorial and tried to create a test drop down menu with Atom (just made a search on the web and found that App, guess it's enough for what I try to do) ,
but does not seem to work properly. At least the css integration.
As I am a real beginner, I copied more or less the code from what I was watching, and tweaking a few things, trying to understand the code of course.
If someone could help me that would be great.
What I have so far (with lots of mistakes):
html,
body {
width: 100%;
margin: 0;
padding: 0;
font-family: helvetica, sans-serif;
}
.multi-level,
.item ul,
.nav input[type="checkbox"] {
display: none;
}
#menu:checked~.multi-level,
.item:checked~ul {
display: block;
}
<div class="nav">
<input type="checkbox" id="menu">
<label for="menu">☰</label>
<div class="multi-level">
<div class="item">
<input type="checkbox" id="A">
<label for="A">Coupant</label>
<ul>
<li><a href="#" </a>Tête</li>
<li><a href="#" </a>corps</li>
<li><a href="#" </a>bras gauche</li>
<li><a href="#" </a>bras droit </li>
</ul>
</div>
<div class="item">
<input type="checkbox" id="B">
<label for="B">Armes à feu</label>
<ul>
<li>
<div class="sub-item">
<input type="checkbox" id="B-A">
<label for="B-A">Tête</label>
<li>
<div class="sub-sub-item">
<input type="checkbox" id="B-A-A">
<label for="B-C">1</label>
<ul>
<li><a>blablablablabla
blablablablabla</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>