我正在尝试向此页面添加自适应导航。在桌面版本中，它应该是一个运行600px的导航栏，并且在一行中位于横幅区域的右侧。在平板电脑视图中，它应分割为徽标下方的两个堆叠行（移动到中心）。在手机视图中，我需要它有一个全宽的菜单＆＃34;单击时，下拉所有其他菜单项。但是，不能为我的生活做到这一点。桌面版本可以正常使用，但其他版本不适用。我已经在这方面工作了几天而且非常沮丧。请帮忙吗？
@charset "utf-8";
/* CSS Document */
/* typography */
body{
color:#666;
font-family:'Ubuntu', Arial, Helvetica, sans-serif;
font-size:1em;
line-height:1.4em;
font-weight:normal;
}
h1, h2, h3, h4, h5, h6{
font-weight:normal;
font-family:'Droid Serif', Arial, Helvetica, sans-serif;
line-height:1.5em;
margin:.45em 0;
padding:0;
}
/* Box sizing. */
*{ -moz-box-sizing:border-box;
box-sizing:border-box;}
/* links */
a,
a:visited,
a:active,
a:hover{color:#0099ff;}
a:hover{ text-decoration:none;}
#logo {
float: left
}
/*MOBILE PHONE*/
@media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
/* structure */
.wrapper{
width: 92%;
margin: 0 auto;
}
header{
padding:15px 0;
}
#banner{
text-align:center;
}
#hero,
#page-header{
background:#f3f3f3;
border-top:1px solid #e2e2e2;
border-bottom:1px solid #e2e2e2;
padding:20px 0;
}
#hero h1{
line-height:1.2em;
margin-top:0px;
margin-bottom:10px;}
#content {
margin:40px 0;
}
p{ margin:0 0 1.5em;}
/* RESPONSIVE IMAGES */
img{ max-width:100%; height:auto;}
/*NAV BAR*/
/*will have 50% of area on top, will have right float*/
nav {
height: 40px;
width: 100%;
float: right;
background: #0099ff;
font-size: 11pt;
position: relative;
border-bottom: 2px solid #283744;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}
/*float menu links to the left*/
nav li {
display: inline;
float: left;
}
/*Add clearfix hack style rules*/
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/*Since there are 5 links each should be 120px*/
nav a {
color: #fff;
display: inline-block;
width: 120px;
text-align: center;
text-decoration: none;
line-height: 40px;
}
/*separate each link by a 1px right border except for last one.*/
/*Change the box-sizing model to border-box to keep menu at 120px*/
nav li a {
border-right: 1px solid #576979;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}
/*Add hover state to turn it to grey*/
nav a:hover, nav a:active {
background-color: #8c99a4;
color: #fff;
}
nav {
border-bottom: 0;
}
/*SPACE GRID ELEMENTS VERTICALLY, SINCE THEY ARE ONE UNDER ANOTHER IN MOBILE VIEW*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
margin-bottom:40px;
/*positioning and padding*/
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
/*FOOTER*/
footer{
clear:both;
font-size:80%;
padding:20px 0;
align-content: center;
}
footer ul{
margin:0;
padding:0;
align-content: center;
}
/*colors and backgrounds*/
body{
background:#fff;
}
h1, h2, h3, h4, h5, h6{
color:#333;
}
footer{
background:#333;
color:#ccc;
align-content: center;
}
footer h1, footer h2, footer h3, footer h4{
color:#CCC;
margin-bottom:10px;
}
footer ul{
margin:0 0 0 8%;
align-content: center;
}
a.buttonlink{
background:#0099ff;
border-radius:7px;
color:#fff;
display:block;
float:left;
margin:10px 15px 10px 0;
padding:10px;
text-decoration:none;
}
a.buttonlink:hover{
background:#CCCCCC;
}
/* Contain floats*/
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
content: " ";
display: table;
}
.clearfix:after,
.container:after,
.row:after{
clear: both;
}
/* TABLET & SMALLER LAPTOPS */
/*navigation*/
@media screen and (max-width: 1023px) {
.wrapper {
max-width: 1050px;
margin: .75em auto;
}
#banner{
float:left;
text-align:left;
margin-bottom:0px;
}
header{
padding:0;
}
#content {
float:left;
width:65%;
}
#content.wide-content{
float:none;
width:100%;
}
.clearfix:after,
.container:after,
.row:after{
clear: both;
}
}
/* DESKTOP*/
/*navigation*/
@media only screen and (min-width: 1024px) {
nav {
height: 40px;
width: 50%;
background: #0099ff;
position: relative;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}
nav a#pull {
display: none;
}
/*GRID*/
/*
& Columns : 12
*/
.row{
margin-left: -15px;
margin-right: -15px;
}
.grid_1 { width: 8.33333333%; }
.grid_2 { width: 16.66666667%; }
.grid_3 { width: 25%; }
.grid_4 { width: 33.33333333%; }
.grid_5 { width: 41.66666667%; }
.grid_6 { width: 50%; }
.grid_7 { width: 58.33333333%; }
.grid_8 { width: 66.66666667%; }
.grid_9 { width: 75%; }
.grid_10 { width: 83.33333333%; }
.grid_11 { width: 91.66666667%; }
.grid_12 { width: 100%; }
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
float: left;
display: block;
}
}<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>GREKOS' GREEK RESTAURANT</title>
<meta name="description" content="Grekos' Restaurant is a family-owned restaurant in Regina, Saskatchewan serving authentic Greek food.">
<meta name="keywords" content="Greek restaurant Regina, Greek food Regina, Regina restaurants, Baklava, Moussaka, Regina Saskatchewan">
<!-- Mobile viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes">
<!-- CSS-->
<link href="http://fonts.googleapis.com/css?family=Droid+Serif|Ubuntu" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="styles/grekostyle.css">
<!-- end CSS-->
</head>
<body id="home">
<header class="wrapper clearfix">
<div id="banner">
<div id="logo"><a href="#"><img src="images/grekoslogo.png" alt="Grekos Logo" width="140"/></a></div>
</div>
<nav class="clearfix">
<ul class="clearfix">
<li><a href="#">Home</a></li>
<li><a href="#">Menus</a></li>
<li><a href="#">Reservations</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<a href="#" id="pull">Menu</a>
</nav>
</header>
<section id="hero" class="clearfix">
<div class="wrapper">
<div class="row">
<div class="grid_5">
<h1>Grekos' Greek Restaurant</h1>
<h3><i>Come Taste The Difference!</i></h3>
<p>Since 1979, Grekos' Greek Restaurant has been serving hungry Regina patrons with tasty, authentic Greek food. The dream of George, Bob and Chris, three brothers from the Peloponnese region of southern Greece, Grekos has earned the reputation of being one of Regina's outstanding restaurants - and more. It has become a gathering place for groups, business meetings, and family memories.</p>
<p><i>"The real test for any restaurant is that people want to come back,"</i> says George. <i>"That is what we strive to achieve every day."</i></p>
<p>From the moment you step through the front doors, you enter a whole new world, with a cosy, relaxing ambiance, tantalizing food and always, a warm welcome. </p>
<p><a href="#" class="buttonlink">SPECIAL EVENTS</a></p>
<p><a href="#" class="buttonlink">CALL FOR RESERVATIONS</a></p>
</div>
<div class="grid_7 leftfloat">
<img src="images/interior.jpg" alt="Grekos interior picture" />
<p class="flex-caption">Grekos' Greek Restaurant offers a pleasing, relaxing atmosphere.</p>
</div>
</div>
</div>
</section>
<!-- main content area -->
<body>
<div id="main" class="wrapper">
<!-- content area -->
<section id="content" class="wide-content">
<div class="row">
<div class="grid_4">
<h1 class="first-header">Lunch Menu</h1>
<img src="images/greeksalad.jpg" alt="Lunch Menu, Greek Salad photo
" width="400" />
<p>Quick service, a welcoming atmosphere and authentic Greek cuisine make Grekos' your <i>"go to"</i> lunch destination.<br>
<a href="#" class="buttonlink">Lunch Menu</a></p><br>
</div>
<div class="grid_4">
<h1 class="first-header">Dinner Menu</h1>
<img src="images/souvlaki.jpg" width="400" />
<p>Treat yourself and your family to traditional Hellenic (Greek) meals - we guarantee a memorable dining experience at affordable prices.<br>
<a href="#" class="buttonlink">Dinner Menu</a></p><br><br>
</div>
<div class="grid_4">
<h1 class="first-header">Drinks, Coffees & Desserts</h1>
<img src="images/drinks.jpg" width="400" />
<p>Enjoy one of our refreshing beverages, and top your meal off with our delectable desserts... and of course, don't forget your Greek coffee afterward!<br><a href="#" class="buttonlink">Drinks, Coffees & Desserts Menu</a></p> <br><br>
</div>
</div>
</section>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
</script>
</body>
<!-- footer area -->
<footer>
<div class="wrapper clearfix">
<b>Grekos' Greek Restaurant </b> 4410 Albert Street, Regina | 306.584.3646
</div>
</footer><!-- #end footer area -->
</body>
</html>