我想创建一个响应式导航栏，在较小的设备上查看时，我使用复选框输入来下拉菜单。尽管页面显示正确，但复选框不会触发下拉菜单。我还是个初学者，所以也许我犯了一个明显的错误，但我真的没有在这里找到解决方案。
感谢您的帮助！
body {
margin: 0;
/*if the user does not have helvetica installed, the browser will use next font in the row*/
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
h1 {
margin-left: 150px;
margin-right: 150px;
margin-top: 150px;
}
h2 {
margin-left: 150px;
margin-right: 150px;
}
p {
text-align: justify;
margin-left: 150px;
margin-right: 150px;
line-height: 150%;
float: right;
}
img.center {
display: block;
margin: auto;
}
ul.recipe {
margin-left: 150px;
margin-right: 150px;
line-height: 150%;
}
nav ul {
/* removing bullets, margins and padding for navigation bar */
list-style-type: none;
margin: 0;
padding: 0;
/*background color of navigaton bar */
overflow: hidden;
background-color: #333333;
/* fixed top, also when user scrolls the page */
position: fixed;
top: 0;
width: 100%;
}
nav li {
float: left;
}
nav li a {
/* formatting links in the navigation bar*/
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 14px;
}
nav li a:hover:not(.active) {
/*changing the link color on non active links on hover*/
background-color: black;
}
.active {
/*showing to user which link is active*/
background-color: #6600cc;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
margin: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
/*Hide checkbox*/
input[type=checkbox] {
/*display: none;*/
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu {
display: block;
}
/*Responsive Styles*/
@media screen and (max-width: 760px) {
body {
margin: 0;
/*if the user does not have helvetica installed, the browser will use next font in the row*/
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
p {
text-align: justify;
margin-top: 100px;
margin-left: 150px;
margin-right: 150px;
line-height: 150%;
float: right;
}
/*Make dropdown links appear inline*/
nav ul {
position: fixed;
display: none;
margin-top: 37px;
}
/*Create vertical spacing*/
nav li {
margin-bottom: 1px;
width: 100%;
margin: 0;
}
/*Make all menu links full width*/
nav ul li,
nav li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display: block;
}
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<label for="show-menu" class="show-menu">Show menu</label>
<input type="checkbox" id="show-menu" role="button">
<nav>
<ul id="menu">
<li><a class="active" href="index.html">Home</a>
</li>
<li><a href="world.html">Food around the globe</a>
</li>
<li><a href="where.html">Where to eat?</a>
</li>
<li><a href="recipes.html">Recipes</a>
</li>
<li><a href="about.html">About me</a>
</li>
</ul>
</nav>
</body>
</html>
答案 0 :(得分：1)
隐藏ul。当复选框为:checked时，您应该显示它。
#show-menu:checked + nav ul {
display: block;
}
工作代码：
body {
margin: 0;
/*if the user does not have helvetica installed, the browser will use next font in the row*/
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
h1 {
margin-left: 150px;
margin-right: 150px;
margin-top: 150px;
}
h2 {
margin-left: 150px;
margin-right: 150px;
}
p {
text-align: justify;
margin-left: 150px;
margin-right: 150px;
line-height: 150%;
float: right;
}
img.center {
display: block;
margin: auto;
}
ul.recipe{
margin-left: 150px;
margin-right: 150px;
line-height: 150%;
}
nav ul {
/* removing bullets, margins and padding for navigation bar */
list-style-type: none;
margin: 0;
padding: 0;
/*background color of navigaton bar */
overflow: hidden;
background-color: #333333;
/* fixed top, also when user scrolls the page */
position: fixed;
top: 0;
width: 100%;
}
nav li {
float: left;
}
nav li a {
/* formatting links in the navigation bar*/
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 14px;
}
nav li a:hover:not(.active) {
/*changing the link color on non active links on hover*/
background-color: black;
}
.active {
/*showing to user which link is active*/
background-color: #6600cc;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
margin: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
/*Hide checkbox*/
input[type=checkbox]{
/*display: none;*/
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
/*Responsive Styles*/
@media screen and (max-width : 760px){
body {
margin: 0;
/*if the user does not have helvetica installed, the browser will use next font in the row*/
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
p {
text-align: justify;
margin-top: 100px;
margin-left: 150px;
margin-right: 150px;
line-height: 150%;
float: right;
}
/*Make dropdown links appear inline*/
nav ul {
position: fixed;
display: none;
margin-top: 37px;
}
#show-menu:checked + nav ul {
display: block;
}
/*Create vertical spacing*/
nav li {
margin-bottom: 1px;
width: 100%;
margin: 0;
}
/*Make all menu links full width*/
nav ul li, nav li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}<label for="show-menu" class="show-menu">Show menu</label>
<input type="checkbox" id="show-menu" role="button">
<nav>
<ul id="menu">
<li><a class="active" href="index.html">Home</a></li>
<li><a href="world.html">Food around the globe</a></li>
<li><a href="where.html">Where to eat?</a></li>
<li><a href="recipes.html">Recipes</a></li>
<li><a href="about.html">About me</a></li>
</ul>
</nav>