【发布时间】：2017-06-10 16:42:01
【问题描述】：
我有一个自定义下拉导航栏，可以响应 480 像素以上的屏幕。我创建了一个隐藏的菜单图标，低于 480 像素时，会显示该图标，单击它时，导航栏应显示，包括下拉列表。 480px以下，图标显示不错，点击后下拉列表不显示。我用的是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>【问题讨论】：
-
您应该创建一个 jsfiddle，以便我们可以尝试更轻松地帮助您。似乎是您对菜单执行的操作使其在媒体查询中中断。只需测试从媒体查询中删除一些内容，直到它起作用。
-
@MrLister 我发布了整个代码正在使用，，，
-
@Medda86 我该如何处理 jsfiddle
标签： html css responsive-design