我在网站上有一个CSS下拉菜单,我希望使用CSS媒体查询做出响应,但它在某些断点处没有响应。使用width和max-width属性使其响应但失败。请协助?
HTML
.navbar{
width:100%;
max-width:1000px;
text-align:center;
margin-top:-8px;
margin-bottom:23px;
margin-left:160px;
}
.menu ul{
/*Removes bullets*/
list-style:none;
}
.menu ul .active{
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 */
}
/*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;
}
@media only screen and (min-width: 1023px) and (max-width: 1223px) {
.navbar{
width:98%;
max-width:1000px;
}
.menu ul li{
width:98%;
max-width:173px;
height:35px;
line-height:35px;
margin:auto;
}
.menu ul ul ul{
width:98%;
margin-left:134px;
top:0px;
}
}

<div class="navbar">
<div class="menu">
<ul>
<li class="active"> Home </li>
<li> <a href="art.html"> Arts & Social Sciences <span class="arrow">▼ </span> </a>
<ul>
<li> <a href="#"> Sociology</a></li>
<li> <a href="#"> Anthropology </a></li>
<li> <a href="#"> Linguistics </a></li>
<li> <a href="#"> Political Science <span class="arrow"> ⟩</span></a>
<ul>
<li><a href="#"> World Civilization </a></li>
<li><a href="#"> Politics of Development </a></li>
<li><a href="#"> Comparative Politics</a></li>
<li><a href="#"> Globalization </a></li>
</ul>
</li>
</ul>
</li>
<li> <a href="business.html"> Business & Economics <span class="arrow">▼ </span> </a>
<ul>
<li> <a href="#"> Business Management</a></li>
<li> <a href="#"> Purchasing and Supplies </a></li>
<li> <a href="#"> Economics </a>
<ul>
<li><a href="#"> Micro Economics </a></li>
<li><a href="#"> Inflation </a></li>
<li><a href="#"> Stock Excahange </a></li>
<li><a href="#"> Supply Chain </a></li>
<li><a href="#"> Macro-Economics </a></li>
</ul>
</li>
</ul>
</li>
<li> <a href="edu.html"> Education<span class="arrow">▼ </span> </a>
<ul>
<li> <a href="#"> Education(Arts)</a></li>
<li> <a href="#"> Early Childhood </a></li>
<li> <a href="#"> Education(Scienmce)</a></li>
<li> <a href="#"> Education & Technology</a>
<ul>
<li><a href=""> Marketing </a></li>
<li><a href=""> Supply Chain </a></li>
</ul>
</li>
</ul>
</li>
<li><a href="contact.php"> Contact Us</a></li>
</ul>
</div>
</div>
&#13;
答案 0 :(得分:0)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<nav id="myNavbar" class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Menu <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Sub-Menu</a></li>
<li><a href="#">Sub-Menu</a></li>
<li><a href="#">Sub-Menu</a></li>
<li><a href="#">Sub-Menu</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
</div>
</body>
</html>
答案 1 :(得分:0)
(function($) {
$.fn.menumaker = function(options) {
var cssmenu = $(this),
settings = $.extend({
format: "dropdown",
sticky: false
}, options);
return this.each(function() {
$(this).find(".button").on('click', function() {
$(this).toggleClass('menu-opened');
var mainmenu = $(this).next('ul');
if (mainmenu.hasClass('open')) {
mainmenu.slideToggle().removeClass('open');
} else {
mainmenu.slideToggle().addClass('open');
if (settings.format === "dropdown") {
mainmenu.find('ul').show();
}
}
});
cssmenu.find('li ul').parent().addClass('has-sub');
multiTg = function() {
cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
cssmenu.find('.submenu-button').on('click', function() {
$(this).toggleClass('submenu-opened');
if ($(this).siblings('ul').hasClass('open')) {
$(this).siblings('ul').removeClass('open').slideToggle();
} else {
$(this).siblings('ul').addClass('open').slideToggle();
}
});
};
if (settings.format === 'multitoggle') multiTg();
else cssmenu.addClass('dropdown');
if (settings.sticky === true) cssmenu.css('position', 'fixed');
resizeFix = function() {
var mediasize = 700;
if ($(window).width() > mediasize) {
cssmenu.find('ul').show();
}
if ($(window).width() <= mediasize) {
cssmenu.find('ul').hide().removeClass('open');
}
};
resizeFix();
return $(window).on('resize', resizeFix);
});
};
})(jQuery);
(function($) {
$(document).ready(function() {
$("#cssmenu").menumaker({
format: "multitoggle"
});
});
})(jQuery);
&#13;
* {
margin: 0;
padding: 0;
text-decoration: none
}
body {
background: #555;
}
header {
position: relative;
width: 100%;
background: #333;
}
.logo {
position: relative;
z-index: 123;
padding: 10px;
font: 18px verdana;
color: #6DDB07;
float: left;
width: 15%
}
.logo a {
color: #6DDB07;
}
nav {
position: relative;
width: 980px;
margin: 0 auto;
}
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #head-mobile {
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
#cssmenu:after,
#cssmenu>ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0
}
#cssmenu #head-mobile {
display: none
}
#cssmenu {
font-family: sans-serif;
background: #333
}
#cssmenu>ul>li {
float: left
}
#cssmenu>ul>li>a {
padding: 17px;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
color: #ddd;
font-weight: 700;
}
#cssmenu>ul>li:hover>a,
#cssmenu ul li.active a {
color: #fff
}
#cssmenu>ul>li:hover,
#cssmenu ul li.active:hover,
#cssmenu ul li.active,
#cssmenu ul li.has-sub.active:hover {
background: #448D00!important;
-webkit-transition: background .3s ease;
-ms-transition: background .3s ease;
transition: background .3s ease;
}
#cssmenu>ul>li.has-sub>a {
padding-right: 30px
}
#cssmenu>ul>li.has-sub>a:after {
position: absolute;
top: 22px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #ddd;
content: ''
}
#cssmenu>ul>li.has-sub>a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #ddd;
content: '';
-webkit-transition: all .25s ease;
-ms-transition: all .25s ease;
transition: all .25s ease
}
#cssmenu>ul>li.has-sub:hover>a:before {
top: 23px;
height: 0
}
#cssmenu ul ul {
position: absolute;
left: -9999px
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: all .25s ease;
-ms-transition: all .25s ease;
background: #333;
transition: all .25s ease
}
#cssmenu ul ul li:hover {}
#cssmenu li:hover>ul {
left: auto
}
#cssmenu li:hover>ul>li {
height: 35px
}
#cssmenu ul ul ul {
margin-left: 100%;
top: 0
}
#cssmenu ul ul li a {
border-bottom: 1px solid rgba(150, 150, 150, 0.15);
padding: 11px 15px;
width: 170px;
font-size: 12px;
text-decoration: none;
color: #ddd;
font-weight: 400;
}
#cssmenu ul ul li:last-child>a,
#cssmenu ul ul li.last-item>a {
border-bottom: 0
}
#cssmenu ul ul li:hover>a,
#cssmenu ul ul li a:hover {
color: #fff
}
#cssmenu ul ul li.has-sub>a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #ddd;
content: ''
}
#cssmenu ul ul li.has-sub>a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #ddd;
content: '';
-webkit-transition: all .25s ease;
-ms-transition: all .25s ease;
transition: all .25s ease
}
#cssmenu ul ul>li.has-sub:hover>a:before {
top: 17px;
height: 0
}
#cssmenu ul ul li.has-sub:hover,
#cssmenu ul li.has-sub ul li.has-sub ul li:hover {
background: #363636;
}
#cssmenu ul ul ul li.active a {
border-left: 1px solid #333
}
#cssmenu>ul>li.has-sub>ul>li.active>a,
#cssmenu>ul ul>li.has-sub>ul>li.active>a {
border-top: 1px solid #333
}
@media screen and (max-width:700px) {
.logo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 46px;
text-align: center;
padding: 10px 0 0 0;
float: none
}
.logo2 {
display: none
}
nav {
width: 100%;
}
#cssmenu {
width: 100%
}
#cssmenu ul {
width: 100%;
display: none
}
#cssmenu ul li {
width: 100%;
border-top: 1px solid #444
}
#cssmenu ul li:hover {
background: #363636;
}
#cssmenu ul ul li,
#cssmenu li:hover>ul>li {
height: auto
}
#cssmenu ul li a,
#cssmenu ul ul li a {
width: 100%;
border-bottom: 0
}
#cssmenu>ul>li {
float: none
}
#cssmenu ul ul li a {
padding-left: 25px
}
#cssmenu ul ul li {
background: #333!important;
}
#cssmenu ul ul li:hover {
background: #363636!important
}
#cssmenu ul ul ul li a {
padding-left: 35px
}
#cssmenu ul ul li a {
color: #ddd;
background: none
}
#cssmenu ul ul li:hover>a,
#cssmenu ul ul li.active>a {
color: #fff
}
#cssmenu ul ul,
#cssmenu ul ul ul {
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left
}
#cssmenu>ul>li.has-sub>a:after,
#cssmenu>ul>li.has-sub>a:before,
#cssmenu ul ul>li.has-sub>a:after,
#cssmenu ul ul>li.has-sub>a:before {
display: none
}
#cssmenu #head-mobile {
display: block;
padding: 23px;
color: #ddd;
font-size: 12px;
font-weight: 700
}
.button {
width: 55px;
height: 46px;
position: absolute;
right: 0;
top: 0;
cursor: pointer;
z-index: 12399994;
}
.button:after {
position: absolute;
top: 22px;
right: 20px;
display: block;
height: 4px;
width: 20px;
border-top: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
content: ''
}
.button:before {
-webkit-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
position: absolute;
top: 16px;
right: 20px;
display: block;
height: 2px;
width: 20px;
background: #ddd;
content: ''
}
.button.menu-opened:after {
-webkit-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
top: 23px;
border: 0;
height: 2px;
width: 19px;
background: #fff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg)
}
.button.menu-opened:before {
top: 23px;
background: #fff;
width: 19px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg)
}
#cssmenu .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
display: block;
border-left: 1px solid #444;
height: 46px;
width: 46px;
cursor: pointer
}
#cssmenu .submenu-button.submenu-opened {
background: #262626
}
#cssmenu ul ul .submenu-button {
height: 34px;
width: 34px
}
#cssmenu .submenu-button:after {
position: absolute;
top: 22px;
right: 19px;
width: 8px;
height: 2px;
display: block;
background: #ddd;
content: ''
}
#cssmenu ul ul .submenu-button:after {
top: 15px;
right: 13px
}
#cssmenu .submenu-button.submenu-opened:after {
background: #fff
}
#cssmenu .submenu-button:before {
position: absolute;
top: 19px;
right: 22px;
display: block;
width: 2px;
height: 8px;
background: #ddd;
content: ''
}
#cssmenu ul ul .submenu-button:before {
top: 12px;
right: 16px
}
#cssmenu .submenu-button.submenu-opened:before {
display: none
}
#cssmenu ul ul ul li.active a {
border-left: none
}
#cssmenu>ul>li.has-sub>ul>li.active>a,
#cssmenu>ul ul>li.has-sub>ul>li.active>a {
border-top: none
}
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav id='cssmenu'>
<div class="logo"><a href="index.html">Responsive </a></div>
<div id="head-mobile"></div>
<div class="button"></div>
<ul>
<li class='active'><a href='#'>HOME</a></li>
<li><a href='#'>Arts And Social Science</a>
<ul>
<li><a href="">sociology</a></li>
<li><a href="">Anthropology</a></li>
<li><a href="">Linguistics</a></li>
<li><a href="">Linguistics</a></li>
<li><a href="">Political Science</a>
<ul>
<li><a href="">World Civilization </a></li>
<li><a href="">Politics of Development</a></li>
<li><a href="">Comparative Politics</a></li>
<li><a href="">Globalization</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Business & Economics</a>
<ul>
<li> <a href="#"> Business Management</a></li>
<li> <a href="#"> Purchasing and Supplies </a></li>
<li> <a href="#"> Economics </a>
<ul>
<li><a href="#"> Micro Economics </a></li>
<li><a href="#"> Inflation </a></li>
<li><a href="#"> Stock Excahange </a></li>
<li><a href="#"> Supply Chain </a></li>
<li><a href="#"> Macro-Economics </a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Education</a>
<ul>
<li> <a href="#"> Education(Arts)</a></li>
<li> <a href="#"> Early Childhood </a></li>
<li> <a href="#"> Education(Scienmce)</a></li>
<li> <a href="#"> Education & Technology</a>
<ul>
<li><a href=""> Marketing </a></li>
<li><a href=""> Supply Chain </a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Contact Us</a>
</li>
</ul>
</nav>
</header>
<section style='padding-top:20px;font:bold 44px arial;color:#68D800;'>
CSS Menu
</section>
&#13;
答案 2 :(得分:0)
@media only screen and (min-width: 1023px) and (max-width: 1223px)
这将执行1023px和1223px之间的代码,这真的很小。
尝试一次只使用其中一个:
@media only screen and (min-width: 1023px)
或者这个:
@media only screen and (min-width: 1023px)
或者只是增加分辨率差距,如下所示:
@media only screen and (min-width: 768px) and (max-width: 1223px)