我有一个自定义下拉导航栏，可响应 480 像素以上的屏幕。我创建了一个隐藏的菜单图标，低于 480px 时，会显示该图标，单击它时导航栏应显示，包括下拉列表。 480像素以下，图标显示正常，但点击后，下拉列表不显示。我使用的是HTML5和CSS3。
/*Styles the background-color of an active link*/
.menu ul .active{
color: #ffffff;
background: #red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red 20%, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red 20%, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red 20%, green); /* For Firefox 3.6 to 15 */
background: linear-gradient(red 20%, green); /* Standard syntax */
background: linear-gradient(red 20%, green); /* Standard syntax */
}
.navbar{
width:100%;
max-width:1000px;
text-align:center;
margin-top:-8px;
margin-bottom:60px;
margin-left:160px;
}
.menu ul{
/*Removes bullets*/
list-style:none;
}
/*Styles each list within ul*/
.menu ul li{
background-color:green;
border:1px solid #ffffff;
width:100%;
max-width:173px;
height:35px;
line-height:35px;
margin:auto;
text-align:center;
/*Makes the list dispaly in a horizontal maneer*/
float:left;
position: relative;
border-radius:8px;
font: 15px;
font-weight:regular;
}
.menu ul li a{
text-decoration:none;
color:white;
display:block;
}
.menu ul li a:hover{
background-color:red;
border-radius:8px;
}
.menu ul ul{
position:absolute;
margin-left:-40px;
display:none;
}
.menu ul li:hover >ul{
display:block;
}
.menu ul ul ul{
width:100%;
margin-left:134px;
top:0px;
}
/*Display the drop-down on hover*/
/*+ selecctor styles every element that are placed immediately after another element */
.menu ul li a:hover + .menu ul li ul, .menu ul li ul:hover{
display:block;
}
/*Hide Checkbox*/
input[type=checkbox]{
display:none;
}
/*Show menu when invisible checkbox is checked*/
/*We select checkbox and then use selector column checked to make sure that the checkbox is checked*/
/*~ selects everything that is beneath element on the left shoul be styled with CSS style within the curly bracket*/
input[type=checkbox]:checked ~ .list{
display:block;
}
/*Styles the menu-label according to its class*/
.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;
}
/*Responsive styles*/
@media screen and (max-width:480px){
/*Make drop-down links appear inline*/
.menu ul{
position:static;
display: none;
}
/*Create vertical spacing*/
.menu ul li{
margin-bottom:1px;
}
/*Make all menu links full width*/
.menu ul li, .menu li a{
width:100%;
}
.show-menu{
display:block;
}
body{
background-image:none;
}
}<!DOCTYPE html>
<html>
<head>
<link href='style.css' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- Clicking on the label will check the checkbox because for and id of checkbox are the same-->
<label for="show-menu" class="show-menu"> Menu </label>
<input type="checkbox" id="show-menu">
<div class="navbar">
<div class="menu">
<ul class ="list">
<li class="active"> Home </li>
<li> <a href="humanities.html"> Humanities <span class="arrow">▼ </span> </a>
<ul>
<li> <a href="#" rel="nofollow"> Music </a></li>
<li> <a href="#" rel="nofollow"> Linguistics </a></li>
<li> <a href="#" rel="nofollow"> Penology </a></li>
<li> <a href="#" rel="nofollow"> Anthropology </a></li>
<li> <a href="#" rel="nofollow"> Sociology <span class="arrow"> ⟩</span></a>
<ul>
<li><a href="#" rel="nofollow"> Psychology</a></li>
<li><a href="#" rel="nofollow"> Counselling </a></li>
<li><a href="#" rel="nofollow"> C.M.D </a></li>
</ul>
</li>
</ul>
</li>
<li> <a href="education.html"> Education <span class="arrow">▼ </span> </a>
<ul>
<li> <a href="#" rel="nofollow"> E.C.D.E </a></li>
<li> <a href="#" rel="nofollow"> Science </a></li>
<li> <a href="#" rel="nofollow"> Arts with Edu </a>
<ul>
<li><a href="#" rel="nofollow"> Swahili </a></li>
<li><a href="#" rel="nofollow"> Psychology </a></li>
<li><a href="#" rel="nofollow"> Sociology of Ed. </a></li>
<li><a href="#" rel="nofollow"> Liberal Ed. </a></li>
</ul>
</li>
</ul>
</li>
<li> <a href="eng.html"> Engineering <span class="arrow">▼ </span> </a>
<ul>
<li> <a href="#" rel="nofollow"> Electrical </a></li>
<li> <a href="#" rel="nofollow"> Civil & Structural </a></li>
<li> <a href="#" rel="nofollow"> Aeronautical </a></li>
<li> <a href="#" rel="nofollow"> Chemical </a></li>
<li> <a href="#"rel="nofollow" > Mechanical </a>
<ul>
<li><a href="#" rel="nofollow"> Industrial </a></li>
<li><a href="#" rel="nofollow"> Automotive </a></li>
</ul>
</li>
</ul>
</li>
<li> <a href="contact.php" rel="nofollow"> Contact Us</a></li>
</ul>
</div>
</div>
</body>
</html>最佳答案
整个问题是你的 #show-menu 复选框没有做任何事情，所以你需要做的就是添加行
#show-menu:checked ~ .navbar .menu ul {display: block;}
到您的 CSS。然后点击大菜单按钮就可以了。无需额外的 JavaScript 例程。
提示:以全页模式运行代码段，这样您就可以使窗口足够窄。
/*Styles the background-color of an active link*/
.menu ul .active {
color: #ffffff;
background: #red;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(red 20%, green);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red 20%, green);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red 20%, green);
/* For Firefox 3.6 to 15 */
background: linear-gradient(red 20%, green);
/* Standard syntax */
background: linear-gradient(red 20%, green);
/* Standard syntax */
}
.navbar {
width: 100%;
max-width: 1000px;
text-align: center;
margin-top: -8px;
margin-bottom: 60px;
margin-left: 160px;
}
.menu ul {
/*Removes bullets*/
list-style: none;
}
/*Styles each list within ul*/
.menu ul li {
background-color: green;
border: 1px solid #ffffff;
width: 100%;
max-width: 173px;
height: 35px;
line-height: 35px;
margin: auto;
text-align: center;
/*Makes the list dispaly in a horizontal maneer*/
float: left;
position: relative;
border-radius: 8px;
font: 15px;
font-weight: regular;
}
.menu ul li a {
text-decoration: none;
color: white;
display: block;
}
.menu ul li a:hover {
background-color: red;
border-radius: 8px;
}
.menu ul ul {
position: absolute;
margin-left: -40px;
display: none;
}
.menu ul li:hover>ul {
display: block;
}
.menu ul ul ul {
width: 100%;
margin-left: 134px;
top: 0px;
}
/*Display the drop-down on hover*/
/*+ selecctor styles every element that are placed immediately after another element */
.menu ul li a:hover+.menu ul li ul,
.menu ul li ul:hover {
display: block;
}
/*Hide Checkbox*/
input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
/*We select checkbox and then use selector column checked to make sure that the checkbox is checked*/
/*~ selects everything that is beneath element on the left shoul be styled with CSS style within the curly bracket*/
input[type=checkbox]:checked~.list {
display: block;
}
/*Styles the menu-label according to its class*/
.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;
}
/*Responsive styles*/
@media screen and (max-width: 480px) {
/*Make drop-down links appear inline*/
.menu ul {
position: static;
display: none;
}
/*Create vertical spacing*/
.menu ul li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
.menu ul li,
.menu li a {
width: 100%;
}
.show-menu {
display: block;
}
body {
background-image: none;
margin-top:70px; /* ML remove this line; this is a patch for the full screen snippet problem */
}
#show-menu:checked ~ .navbar .menu ul {display: block;}
}<!-- Clicking on the label will check the checkbox because for and id of checkbox are the same-->
<label for="show-menu" class="show-menu"> Menu </label>
<input type="checkbox" id="show-menu">
<div class="navbar">
<div class="menu">
<ul class="list">
<li class="active"> Home </li>
<li> <a href="humanities.html"> Humanities <span class="arrow">▼ </span> </a>
<ul>
<li> <a href="#" rel="nofollow"> Music </a></li>
<li> <a href="#" rel="nofollow"> Linguistics </a></li>
<li> <a href="#" rel="nofollow"> Penology </a></li>
<li> <a href="#" rel="nofollow"> Anthropology </a></li>
<li> <a href="#" rel="nofollow"> Sociology <span class="arrow"> ⟩</span></a>
<ul>
<li><a href="#" rel="nofollow"> Psychology</a></li>
<li><a href="#" rel="nofollow"> Counselling </a></li>
<li><a href="#" rel="nofollow"> C.M.D </a></li>
</ul>
</li>
</ul>
</li>
<li> <a href="education.html"> Education <span class="arrow">▼ </span> </a>
<ul>
<li> <a href="#" rel="nofollow"> E.C.D.E </a></li>
<li> <a href="#" rel="nofollow"> Science </a></li>
<li> <a href="#" rel="nofollow"> Arts with Edu </a>
<ul>
<li><a href="#" rel="nofollow"> Swahili </a></li>
<li><a href="#" rel="nofollow"> Psychology </a></li>
<li><a href="#" rel="nofollow"> Sociology of Ed. </a></li>
<li><a href="#" rel="nofollow"> Liberal Ed. </a></li>
</ul>
</li>
</ul>
</li>
<li> <a href="eng.html"> Engineering <span class="arrow">▼ </span> </a>
<ul>
<li> <a href="#" rel="nofollow"> Electrical </a></li>
<li> <a href="#" rel="nofollow"> Civil & Structural </a></li>
<li> <a href="#" rel="nofollow"> Aeronautical </a></li>
<li> <a href="#" rel="nofollow"> Chemical </a></li>
<li> <a href="#" rel="nofollow"> Mechanical </a>
<ul>
<li><a href="#" rel="nofollow"> Industrial </a></li>
<li><a href="#" rel="nofollow"> Automotive </a></li>
</ul>
</li>
</ul>
</li>
<li> <a href="contact.php" rel="nofollow"> Contact Us</a></li>
</ul>
</div>
</div>关于html - 我的导航栏在最大宽度为 480 像素的移动设备上没有响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44470226/