Dropdown menu html + css without JavaScript - html

Question

Hello could someone please tell me why my menu does not go from page to page.
Dropdown works but when I click it doesn't go to the subpage. Anticipating the question, I don't want to use JavaScript. Buttons without dropdown menu works. If this cannot be fixed, could someone sent me a menu in similar style without JavaScript.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #333;
}
hr {
border-top: 2px dashed white;
border-bottom: none;
}
a {
text-decoration: none;
color: black;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
.navbar {
height: 6vh;
display: flex;
justify-content: space-around;
align-items: center;
width: 60%;
margin: auto;
}
.dropdown {
position: relative;
}
.dropdown ul {
position: absolute;
background: #bebebe;
margin-top: 10px;
width: 200px;
height: 200px;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
list-style: none;
border-radius: 5px;
opacity: 0;
pointer-events: none;
transform: translateY(-10px);
transition: all 0.6s ease;
left: 0px;
}
.dropdown li {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.dropdown li:hover {
background-color: darkslategray;
}
.navbar button,
.deco {
background: none;
border: none;
color: black;
text-decoration: none;
font-size: 18px;
cursor: pointer;
}
.navbar button:hover,
.deco:hover {
color: darkslategray;
}
.dropdown button:focus+ul {
opacity: 1;
pointer-events: all;
transform: translateY(0px);
}
.top {
text-decoration: none;
background: yellow;
border: none;
color: black;
font-size: 48px;
cursor: pointer;
border-radius: 5px;
width: 45px;
height: 45px;
align-items: center;
right: 0;
bottom: 0;
position: fixed;
}
.autor {
color: #bebebe;
font-size: 16px;
}
.printButton {
border: none;
font-size: 18px;
border-radius: 5px;
width: 80px;
height: 20px;
cursor: pointer;
color: black;
background: darkslategray;
}
#media print {
.noPrint {
display: none;
}
}
<header class="noPrint">
<img src="https://via.placeholder.com/80" alt="Logo strony" class="center">
<div class="navbar">
<button>Główna</button>
<div class="dropdown">
<button>Ciasta</button>
<ul>
<li>Biszkopt</li>
<li>Beza</li>
<li>Makowiec</li>
</ul>
</div>
<div class="dropdown">
<button>Pieczywo</button>
<ul>
<li>Chleb</li>
<li>Bułki</li>
<li>Bułki na słodko</li>
</ul>
</div>
<button>Informacje</button>
</div>
</header>

Answer 1

Instead of using a button, I used input of type checkbox to style the dropdown when its open and remove the style when its closed. button won't work because they require either JavaScript to add functions or be inside a form element (to act as a submit button which is not what you want here).
.dropdown {
position: relative;
display: inline-block;
}
.dropdown > .dropdown-text {
padding: 10px 20px;
}
.dropdown > input {
top: 0;
opacity: 0;
margin: 0;
position: absolute;
height: 100%;
width: 100%;
cursor: pointer;
}
.dropdown > input:checked + .dropdown-container {
transform: scaleY(1);
}
.dropdown > .dropdown-container {
transform: scaleY(0);
width: 100%;
background-color: #ffffff;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.3);
position: absolute;
}
.dropdown > .dropdown-container > a {
display: block;
text-decoration: none;
padding: 10px;
background-color: #ffffff;
color: #000000;
}
<div class="dropdown">
<div class="dropdown-text">THIS IS A DROPDOWN</div>
<input type="checkbox">
<div class="dropdown-container">
Item 1
Item 2
Item 3
</div>
</div>