Responsive navbar problem (the sub-categories are displayed) - html

Question

I have a problem with my responsive navbar...
When my navigation bar switches to mobile format (hamburger menu) the sub-categories are displayed even though I haven't clicked on them yet.
I think it's a selector problem but I can't find it...
I'm not very good with selectors and combiners (I'm a beginner) and even when I tried several things I didn't succeed...
#media screen and (max-width:940px) {
.container {
height: 60vh;
width: 100%;
background-image: url(background.jpg);
background-position: center;
background-size: cover;
position: relative;
}
nav ul {
margin-right: 0px;
float: left;
position: absolute;
}
nav .logo {
padding-left: 30px;
width: 160px;
}
nav ul li,
nav ul ul li {
display: block;
width: 100%;
background-color: black;
}
nav ul ul {
top: 70px;
position: static;
float: none;
display: none;
visibility: visible;
}
nav ul ul a {
padding-left: 40px;
}
nav ul li a:hover {
box-shadow: none;
}
.show {
display: block;
color: white;
font-size: 18px;
padding: 0 20px;
line-height: 70px;
cursor: pointer;
}
.icon {
display: block;
position: absolute;
right: 40px;
line-height: 70px;
font-size: 25px;
cursor: pointer;
}
.hamburger {
width: 25px;
}
.show+a,
.navbar nav>ul {
display: none;
}
[id^=btn-1]:checked .show+a,
.navbar nav>ul>li>ul {
display: block;
}
[id^=btn]:checked+nav>ul {
display: block;
}
}
<div class="container">
<div class="navbar">
<img src="img/logo.png" alt="logo" class="logo">
<label for="btn" class="icon">
<img src="img/menu.png" alt="" class="hamburger">
</label>
<input type="checkbox" id="btn">
<nav>
<ul>
<li>Index</li>
<li>
<label for="btn-1" class="show">category 1</label>
Catégorie 1
<input type="checkbox" id="btn-1">
<ul>
<li>Sub category 1</li>
<li>Sub catégorie 2</li>
<li>Sub catégorie 3</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>