我的响应式水平菜单与我的页脚一致。 See FULL demo here。这不应该发生，因为我希望页脚（灰色位）出现在我的水平菜单栏下面，因为我需要在响应水平菜单栏和页脚之间添加更多元素。
我试图加上明确的说法：两者之间都没有成功。
HTML：
<div class="horizontalmenubar">
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">About ￬</a>
<ul class="hidden">
<li><a href="#">Who We Are</a></li>
<li><a href="#">What We Do</a></li>
</ul>
</li>
<li>
<a href="#">Portfolio ￬</a>
<ul class="hidden">
<li><a href="#">Photography</a></li>
<li><a href="#">Web & User Interface Design</a></li>
<li><a href="#">Illustration</a></li>
</ul>
</li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<footer id="footer">
<section>
<h3>ABOUT US:</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br></p>
</section>
<section>
<h3>LIKE, FOLLOW OR WATCH US:</h3>
<ul class="social">
<li><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/facebook.png"/></a></li>
<li><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/twitter1.png"/></a></li>
<li><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/youtube.png"/></a></li>
</ul>
</section>
<section>
<h3>CONTACT US:</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br><br><b>abcd@efghi.com</b><br><br>00 12 34 567890<br>ACME Ltd<br>1 Acme Road<br>Acme City<br>USA</p>
</section>
</footer>
<footer class="footerTwo">
<p> Copyright © 2015 | ACME Ltd | All rights reserved.</p>
</footer>
CSS：
/* Full width styling */
* {
margin: 0;
border: 0;
padding: 0;
}
body {
background: #F5F5F5;
color: #363636;
margin: 0;
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 20px;
}
h1 {
text-align: center;
font-size: 100%;
line-height: 120%;
padding: 5% 0 5% 0;
}
h2 {
line-height: 280%;
padding-left: 3%;
text-decoration: underline;
}
h3 {
line-height: 120%;
padding: 5% 0 5% 0;
}
p {
padding: 1%;
}
img {
text-align: center;
max-width: 100%;
height: auto;
width: auto;
}
a {
color: #FFFFFF;
font-weight: bold;
font-size: 20px;
text-decoration: none;
}
a:hover {
color: #FFFFFF;
font-weight: bold;
text-decoration: underline;
}
header {
background-color: #3366FF;
width: 100%;
height: 86px;
position: fixed;
top: 0;
left: 0;
z-index: 100;
opacity: 0.90%;
}
#logo {
margin: 0px;
float: left;
width: 200px;
height: 86px;
background: url("../images/logo.png") no-repeat center;
}
nav {
float: right;
padding: 25px 20px 20px 0;
}
#menu-icon {
display: hidden;
width: 100px;
height: 86px;
background: url(http://www.w3newbie.com/wp-content/uploads/icon.png);
padding: 0;
margin: 0;
}
a:hover#menu-icon {
border-radius: 2px 2px 0 0;
}
ul {
list-style: none;
}
nav ul li {
display: inline-block;
float: left;
padding: 10px;
}
nav ul li a:hover {
color: #363636;
text-decoration: none;
}
section {
width: 29%;
float: left;
margin: 2% 2% 2% 2%;
text-align: center;
}
.clear {
clear: both;
}
#genericlinkdecoration {
color: #3366FF;
text-decoration: none;
font-weight: bold;
font-size: 14px;
}
footer {
background-color: #808080;
width: 100%;
overflow: hidden;
}
footer p, footer h3 {
color: #FFFFFF;
}
footer p a {
color: #FFFFFF;
text-decoration: none;
font-weight: normal;
font-size: 14px;
}
ul.social li {
display: inline;
}
ul.social img {
height: 50px;
}
footer.footerTwo {
border-top: 1px solid #4D4350;
background-color: #3366FF;
text-align: center;
}
/* Media queries */
@media only screen and (max-width: 760px) {
body {
position: absolute;
}
header {
position: absolute;
}
#menu-icon {
display: inline-block;
}
nav {
padding: 0;
}
nav ul, nav:active ul {
display: none;
position: absolute;
background: #FFFFFF;
border: 1px solid #D6D6D6;
right: 20px;
top: 60px;
width: 50%;
border-radius: 2px;
}
nav:hover ul {
display: block;
}
nav ul li a {
color: #363636;
text-decoration: none;
}
nav ul li a:hover {
color: #3366FF;
text-decoration: none;
}
nav li {
width: 100%;
margin: 0;
}
section {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
}
.horizontalmenubar {
margin-top: 86px;
background: #33DD00;
}
/*Strip the ul of padding and list styling*/
.horizontalmenubar ul {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
}
/*Create a horizontal list with spacing*/
.horizontalmenubar li {
display:inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
.horizontalmenubar li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*Hover state for top level links*/
.horizontalmenubar li:hover a {
background: #19c589;
}
/*Style for dropdown links*/
.horizontalmenubar li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
.horizontalmenubar li:hover ul a:hover {
background: #19c589;
color: #fff;
}
/*Hide dropdown links until they are needed*/
.horizontalmenubar li ul {
display: none;
}
/*Make dropdown links vertical*/
.horizontalmenubar li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
.horizontalmenubar li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
.horizontalmenubar ul li a:hover + .hidden, .hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.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;
}
/*Hide checkbox*/
.horizontalmenubar input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
.horizontalmenubar input[type=checkbox]:checked ~ #menu{
display: block;
}
/*Responsive Styles*/
@media screen and (max-width : 760px){
/*Make dropdown links appear inline*/
.horizontalmenubar ul {
position: static;
display: none;
}
/*Create vertical spacing*/
.horizontalmenubar li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
.horizontalmenubar ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}
感谢任何帮助。
答案 0 :(得分：0)
删除位置：在此css代码附近绝对。
/*Strip the ul of padding and list styling*/
.horizontalmenubar ul {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
}