0
我有我的響應水平菜單，它與我的頁腳內聯顯示。 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>[email protected]</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;
}
}
任何幫助表示讚賞。
工作就像一個魅力...謝謝 – ANM 2015-04-06 16:17:15