0
我在我的网站上创建了CSS移动菜单，它在我的笔记本电脑上正常工作。当我在680px下的笔记本电脑上最小化浏览器的默认菜单成为手机菜单，但在智能手机上不工作，就像它保持默认菜单。我做错了什么？移动菜单不在手机上只显示在桌面上
/* CSS Document */
body{
\t font-family: 'Prompt', Sans-serif;
\t background-image: url(wallpaper.png);
\t background-color:#ECCB6C;
\t background-repeat: no-repeat;
\t background-attachment: fixed;
\t margin: 0;
\t padding: 0;
\t text-align: center;
\t }
header{
\t background-image:url(logo.png);
\t background-repeat:no-repeat;
\t background-position:bottom left;
\t width:60%;
\t height:220px;
\t margin:0 auto;
\t padding:0;
\t }
nav{
\t width:70%;
\t height:auto;
\t margin:0 auto 3px auto;
\t background-image:url(hfbkg.png);
\t padding:0 80px 0 80px;
\t }
nav ul{
\t overflow:hidden;
\t padding:0;
\t text-align:center;
\t margin:0;
\t transition:max-height 0.4s;
\t -webkit-transition:max-height 0.4s;
\t -ms-transition:max-height 0.4s;
\t -moz-transition:max-height 0.4s;
\t -o-transition:max-height 0.4s;
\t }
nav ul li{
\t display:inline-block;
\t padding:5px 7px;
\t }
nav ul li:hover{
\t background-color:#FFFFFF;
\t }
.handle {
\t width:100%;
\t text-align:left;
\t box-sizing:border-box;
\t padding:15px 10px;
\t cursor:pointer;
\t color:#FFFFFF;
\t display:none;
\t }
\t
@media screen and (max-width: 680px){
\t nav ul{
\t \t max-height:0;
\t }
\t .showing{
\t \t max-height:20em;
\t } \t
\t nav ul li{
\t \t box-sizing:border-box;
\t \t width: 100%;
\t \t padding:15px 0px;
\t \t margin:0;
\t \t text-align:left;
\t }
\t .handle{
\t \t display:block;
\t }
\t }
\t
@media (max-width:680px){
\t #kontakt{
\t \t width:100%;
\t }
\t #iframe{
\t \t width:100%;
\t }
\t }
\t
section{
\t width:70%;
\t height:auto;
\t background-image:url(textbkg.png);
\t line-height:1.5em;
\t font-size:1.1em;
\t padding:60px 80px;
\t margin:0 auto;
\t clear:both;
\t }
section a:link {
\t color:#000000;
\t }
section a:hover {
\t text-decoration: none;
\t color:#FFAE00;
\t }
section a:visited {
\t text-decoration: none;
\t color:#000000;
\t }
#textarea{
\t width:350px;
\t height:200px;
\t padding:2px;
\t margin:5px;
\t }
#ime{
\t width:350px;
\t height:20px;
\t padding:2px;
\t margin:5px;
\t }
#email{
\t width:350px;
\t height:20px;
\t padding:2px;
\t margin:5px;
\t }
#decoupauge img{
\t margin:1%;
\t border: thick solid;
\t with: 15px;
\t color: #353439;
\t padding:2px;
\t }
#ukrasi img{
\t margin:1%;
\t border: thick solid;
\t with: 15px;
\t color: #353439;
\t padding:2px;
\t } \t
#sponzori{
\t margin:5%;
\t align-content:center;
\t }
#kontaktobr{
\t width:400px;
\t height:auto;
\t margin:20px 0;
\t padding:10px;
\t float:left;
\t }
#iframe{
\t float:right;
\t margin:20px 0;
\t padding:10px;
\t }
#adresa { /* pošto su iframe i kontakt obrazac u floatu u adresi ne smije biti float zato što adresa razvlači section background do footera */
\t width:410px;
\t height:auto;
\t margin:10px;
\t padding:20px;
\t }
#adresa p {
\t margin:0px;
\t padding:0;
\t }
#adresa a:link{
\t color:#000000;
\t text-decoration: none;
\t }
#adresa a:hover{
\t text-decoration: none;
\t color:#FFAE00;
\t }
footer{
\t width:70%;
\t height:auto;
\t margin:3px auto 0 auto;
\t background-image:url(hfbkg.png);
\t padding:5px 80px;
\t text-align:end;
\t color:#FFFFFF;
\t clear:both;
\t }
footer a:hover{
\t color:#FBEE9A;
\t } \t
a{
\t margin:0;
\t }
a:link {
\t color: #FFFFFF;
\t text-decoration: none;
\t }
a:visited {
\t text-decoration: none;
\t color:#FFFFFF;
\t }
a:hover {
\t text-decoration: none;
\t color:#363539;
\t }
a:active {
\t text-decoration: none;
\t color: #363539;
\t }
p{
\t text-align:justify;
\t }<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Prompt" rel="stylesheet">
<style type="text/css">
body,td,th {
\t font-family: Prompt, Sans-serif;
}
</style>
</head>
<body background="wallpaper.png">
<header>
</header>
<nav>
<ul>
<a href="index.html"><li>Početna</li></a>
<a href="terapija.html"><li>Terapije</li></a>
<a href="galerija.html"><li>Glerija</li></a>
<a href="donacije.html"><li>Donacije</li></a>
<a href="linkovi.html"><li>Linkovi</li></a>
<a href="kontakt.html"><li>Kontakt</li></a>
</ul>
<div class="handle">Menu</div>
</nav>
<section>
<h3><strong>O nama</strong></h3>
<p> Udruga je počela sa radom 2013. godine..</p>
</section>
<script>
\t $('.handle').on('click', function(){
\t \t $('nav ul').toggleClass('showing');
\t });
\t </script>
<footer>
<a>Copyright 2016</a>
</footer>
</body>
</html>
泰，现在工作得很好。 – Jurica