不带JavaScript的下拉菜单html+css

Question

你好，有人能告诉我为什么我的菜单不能从一页转到另一页吗。下拉菜单有效，但当我单击时，它不会转到子页面。预料到这个问题，我不想使用JavaScript。没有下拉菜单的按钮可以工作。如果不能解决这个问题，有人能给我发一个没有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">
<a href="index.html"><img src="https://via.placeholder.com/80" alt="Logo strony" class="center"></a>
<div class="navbar">
<button><a href="index.html" class="deco">Główna</a></button>
<div class="dropdown">
<button>Ciasta</button>
<ul>
<li><a href="biszkopt.html">Biszkopt</a></li>
<li><a href="beza.html">Beza</a></li>
<li><a href="makowiec.html">Makowiec</a></li>
</ul>
</div>
<div class="dropdown">
<button>Pieczywo</button>
<ul>
<li><a href="chleb.html">Chleb</a></li>
<li><a href="bulki.html">Bułki</a></li>
<li><a href="bulkiNaSlodko.html">Bułki na słodko</a></li>
</ul>
</div>
<button><a href="informacje.html" class="deco">Informacje</a></button>
</div>
</header>

Answer 1

我没有使用button，而是使用checkbox类型的input在下拉列表打开时设置样式，并在下拉列表关闭时删除样式。button不起作用，因为它们要么需要JavaScript来添加函数，要么需要位于form元素内(充当提交按钮，这不是您想要的(。

.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">
<a href="/link1">Item 1</a>
<a href="/link2">Item 2</a>
<a href="/link3">Item 3</a>
</div>
</div>