这可能是我错过的一些简单，但我正在为移动设备制作常规菜单，由于某种原因它无法正常工作。欢迎大家帮忙！我不是很擅长:(如果你愿意，我可以给你一个在线链接。
HTML：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<!--fonts--!>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="wrapper">
<div id="back">
<div id="top"><logo><a href="index.html"><img src="img/logo.png"></a></logo>
<menu>
<div class="button1"><a href="index.html">Home</a></div>
<div class="button2"><a href="#">button1</a></div>
<div class="button3"><a href="#">button2</a></div>
<div class="button4"><a href="#">button3</a></div>
<div class="button5"><a href="#">button4</a></div>
<div class="button6"><a href="#">Contact</a></div>
</menu><div id="socialmedia">
<a href="https://www.facebook.com/"><img src="img/fb.png"></a> <a href="https://twitter.com/"><img src="img/twit.png"></a></div>
</div>
<div id="middle">
<article> text </article>
</div>
<div id="bottom">© 2014 copyright</div>
</div>
</div>
</body>
</html>
CSS：
@charset "utf-8";
/* CSS Document */
html {
width: 100%;
height: 100%;
}
body {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
background-attachment: fixed;
background-image: url(../img/bga.jpg);
background-repeat: no-repeat;
background-position: center center;
margin: 0px;
padding: 0px;
}
#wrapper {
background-image: url(../img/background2.png);
background-repeat: repeat;
width: 100%;
height: 100%;
}
#back {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
background-attachment: fixed;
background-image: url(../img/background3.png);
background-repeat: no-repeat;
background-position: center center;
margin: 0px;
padding: 0px;
}
#top {
position: relative;
height: 20%;
width: 100%;
}
menu {
float: left;
position: relative;
width: 800px;
}
#middle {
position: relative;
height: 70%;
width: 100%;
}
#bottom {
position: relative;
height: 10%;
width: 99%;
text-align: right;
}
logo {
float: left;
width: 150px;
margin-right: 5px;
position: relative;
height: auto;
}
article {
background: rgba(225, 225, 225, 0.75);
border-radius: 15px;
height: 500px;
width: 630px;
float: left;
margin-left: 20px;
padding: 5px;
overflow: auto;
}
logo img{
width: 150px;
height: auto;
}
.button1 {
float: left;
width: 100px;
margin-top: 20px;
text-align: center;
font-family: 'Righteous', Arial, Baveuse;
font-size: 30px;
margin-left: 10px;
}
.button2 {
float: left;
width: 100px;
margin-top: 30px;
text-align: center;
font-family: 'exo 2', Arial, Baveuse;
font-size: 16px;
margin-left: 10px;
}
.button3 {
float: left;
width: 100px;
margin-top: 30px;
text-align: center;
font-family: 'Redressed', Arial, Baveuse;
font-size: 20px;
margin-left: 10px;
}
.button4 {
float: left;
width: 100px;
margin-top: 30px;
text-align: center;
font-family: 'Architects Daughter', Arial, Baveuse;
font-size: 18px;
margin-left: 10px;
}
.button5 {
float: left;
width: 100px;
margin-top: 30px;
text-align: center;
font-family: 'Quicksand', Arial, Baveuse;
font-size: 18px;
margin-left: 10px;
}
.button6 {
float: left;
width: 100px;
margin-top: 22px;
text-align: center;
font-family: 'Patrick Hand SC', Arial, Baveuse;
font-size: 25px;
margin-left: 10px;
}
menu a {
color: black;
text-decoration: none;
}
menu a:hover {
color: #5CB94C;
}
#socialmedia {
float: right;
margin-top: 10px;
margin-right: 10px;
position: relative;
}
#socialmedia img{
margin-left: 5px;
position: relative;
}
CSS mobile：
@charset "utf-8";
/* CSS Document */
@media screen and (max-width: 480px) {
#back { -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
background-attachment: fixed;
background-image: none;
background-repeat: no-repeat;
background-position: center center;
margin: 0px;
overflow:visible;
}
#top {
position: relative;
height: auto;
width: 100%;
background-color:#FFF;
display: block;
}
menu {
position: relative;
width: 100%;
hight: auto;
padding: 0px;
}
#middle {
position: relative;
height: auto;
width: 100%;
}
#bottom {
height: auto;
width: 95%;
text-align: center;
background-color:#FFF;
margin-right:auto;
margin-left:auto;
margin-top:3px;
}
logo {
width: 100%;
margin-right: 0px;
height: auto;
text-align: center;
}
article {
background: rgba(225, 225, 225, 0.75);
border-radius: 15px;
height: auto;
width: 95%;
float: none;
margin-top: 3px;
margin-left: auto;
margin-right: auto;
padding: 5px;
overflow: none;
}
.button1 {
float: none;
width: 100%;
margin-top: 0px;
text-align: center;
font-family: 'Righteous', Arial, Baveuse;
font-size: 30px;
margin-left: 0px;
}
.button2 {
float: none;
width: 100%;
margin-top: 0px;
text-align: center;
font-family: 'exo 2', Arial, Baveuse;
font-size: 16px;
margin-left: 0px;
}
.button3 {
float: none;
width: 100%;
margin-top: 0px;
text-align: center;
font-family: 'Redressed', Arial, Baveuse;
font-size: 20px;
margin-left: 0px;
}
.button4 {
float: none;
width: 100%;
margin-top: 0px;
text-align: center;
font-family: 'Architects Daughter', Arial, Baveuse;
font-size: 18px;
margin-left: 0px;
}
.button5 {
float: none;
width: 100%;
margin-top: 0px;
text-align: center;
font-family: 'Quicksand', Arial, Baveuse;
font-size: 18px;
margin-left: 0px;
}
.button6 {
float: none;
width: 100%;
margin-top: 0px;
text-align: center;
font-family: 'Patrick Hand SC', Arial, Baveuse;
font-size: 25px;
margin-left: 0px;
}
#socialmedia {
float: none;
width: 90%;
height: auto;
margin-top: 0px;
margin-right: 0px;
position: relative;
text-align:right;
}
#socialmedia img{
margin-left: 5px;
position: relative;
}
}