Here's a link to the fiddle.我在顶部有一个不错的菜单栏，但在用户向下滚动时它不会停留。当我尝试更改CSS以在position:fixed下包含#cssmenu时，所有内容都会被抛出。
以下是代码段内的代码：
@font-face {
font-family:'Abraham Lincoln';
src: url(../fonts/Abraham-Lincoln/AbrahamLincoln.ttf);
}
@font-face {
font-family:'Ingleby';
src: url(../fonts/Ingleby/Ingleby_regular);
}
body {
font-family:'Ingleby';
background-image: url(../Images/background.jpg);
background-repeat: repeat;
width: 100%;
margin: 0px;
padding: 0px;
}
.clearfix:after {
display: block;
clear: both;
}
h2.names {
font-size: 36px;
text-align: center;
font-family:'Abraham Lincoln';
}
h3.date {
font-size: 28px;
text-align: center;
font-family:'Abraham Lincoln';
margin-top: -20px;
}
h4 {
font-size: 20px;
text-align: center;
font-family:'Abraham Lincoln';
}
p {
width: 960px;
margin-left: auto;
margin-right: auto;
font-size: 16px;
}
.background {
width: 960px;
display: block;
margin: 0px auto;
margin-top: 0px;
}
footer {
text-align: right;
font-size: 12px;
height: 30px;
background-color: rgb(59, 58, 76);
width: 100%;
padding-top: 5px;
padding-bottom: 10px;
}
footer a {
text-align: right;
text-decoration: none;
display: block;
width: 960px;
margin-left: auto;
margin-right: auto;
color: black;
font-size: 12px;
padding-top: 12px;
}
footer a:hover {
text-decoration: underline;
}
#map-canvas {
height: 50%;
margin-top: 200px;
padding: 200px;
}
/* ------------ */
/* NEW MENU */
/* ------------ */
#cssmenu ul, #cssmenu li, #cssmenu span, #cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
ul {
text-align: center;
}
#cssmenu {
line-height: 1;
background: #141414;
background: -moz-linear-gradient(top, #333333 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #333333 0%, #141414 100%);
background: -o-linear-gradient(top, #333333 0%, #141414 100%);
background: -ms-linear-gradient(top, #333333 0%, #141414 100%);
background: linear-gradient(to bottom, #333333 0%, #141414 100%);
border-bottom: 2px solid #0fa1e0;
width: auto;
}
#cssmenu:after, #cssmenu ul:after {
content:'';
display: block;
clear: both;
}
#cssmenu a {
background: #141414;
background: -moz-linear-gradient(top, #333333 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #333333 0%, #141414 100%);
background: -o-linear-gradient(top, #333333 0%, #141414 100%);
background: -ms-linear-gradient(top, #333333 0%, #141414 100%);
background: linear-gradient(to bottom, #333333 0%, #141414 100%);
color: #ffffff;
display: block;
font-family: Helvetica, Arial, Verdana, sans-serif;
padding: 19px 20px;
text-decoration: none;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul > li {
display: inline-block;
margin: 0;
}
#cssmenu.align-center {
text-align: center;
}
#cssmenu.align-center > ul > li {
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul {
float: right;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu > ul > li > a {
color: #ffffff;
font-size: 12px;
}
#cssmenu > ul > li:hover:after {
content:'';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #0fa1e0;
margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
}
#cssmenu.align-right > ul > li:first-child > a, #cssmenu.align-center > ul > li:first-child > a {
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
#cssmenu.align-right > ul > li:last-child > a {
border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a, #cssmenu > ul > li:hover > a {
color: #ffffff;
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
background: #070707;
background: -moz-linear-gradient(top, #262626 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #262626), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #262626 0%, #070707 100%);
background: -o-linear-gradient(top, #262626 0%, #070707 100%);
background: -ms-linear-gradient(top, #262626 0%, #070707 100%);
background: linear-gradient(to bottom, #262626 0%, #070707 100%);
}
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#cssmenu.align-right .has-sub ul {
left: auto;
right: 0;
}
#cssmenu .has-sub ul li {
*margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
background: #0fa1e0;
border-bottom: 1px dotted #31b7f1;
font-size: 11px;
filter: none;
display: block;
line-height: 120%;
padding: 10px;
color: #ffffff;
}
#cssmenu .has-sub ul li:hover a {
background: #0c7fb0;
}
#cssmenu ul ul li:hover > a {
color: #ffffff;
}
#cssmenu .has-sub .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu.align-right .has-sub .has-sub ul, #cssmenu.align-right ul ul ul {
left: auto;
right: 100%;
}
#cssmenu .has-sub .has-sub ul li a {
background: #0c7fb0;
border-bottom: 1px dotted #31b7f1;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #0a6d98;
}
#cssmenu ul ul li.last > a, #cssmenu ul ul li:last-child > a, #cssmenu ul ul ul li.last > a, #cssmenu ul ul ul li:last-child > a, #cssmenu .has-sub ul li:last-child > a, #cssmenu .has-sub ul li.last > a {
border-bottom: 0;
}<div id='cssmenu'>
<ul>
<li><a href='#'><span>Home</span></a>
</li>
<li class='active has-sub'><a href='#'><span>Products</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Product 1</span></a>
<ul>
<li><a href='#'><span>Sub Product</span></a>
</li>
<li class='last'><a href='#'><span>Sub Product</span></a>
</li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Product 2</span></a>
<ul>
<li><a href='#'><span>Sub Product</span></a>
</li>
<li class='last'><a href='#'><span>Sub Product</span></a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>About</span></a>
</li>
<li class='last'><a href='#'><span>Contact</span></a>
</li>
</ul>
</div>
<h2 class="names">Bob + Suzy</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>I absolutely love this webpage!</p>
<p>It is soooooo cool!</p>
答案 0 :(得分：1)
这应该有所帮助。添加了.before_content类以在菜单和内容之间提供边距。
#cssmenu {
position: fixed;
top: 0;
width: 100%;
}
.before_content {
margin-top: 80px;
}
@font-face {
font-family:'Abraham Lincoln';
src: url(../fonts/Abraham-Lincoln/AbrahamLincoln.ttf);
}
@font-face {
font-family:'Ingleby';
src: url(../fonts/Ingleby/Ingleby_regular);
}
body {
font-family:'Ingleby';
background-image: url(../Images/background.jpg);
background-repeat: repeat;
width: 100%;
margin: 0px;
padding: 0px;
}
.clearfix:after {
display: block;
clear: both;
}
h2.names {
font-size: 36px;
text-align: center;
font-family:'Abraham Lincoln';
}
h3.date {
font-size: 28px;
text-align: center;
font-family:'Abraham Lincoln';
margin-top: -20px;
}
h4 {
font-size: 20px;
text-align: center;
font-family:'Abraham Lincoln';
}
p {
width: 960px;
margin-left: auto;
margin-right: auto;
font-size: 16px;
}
.background {
width: 960px;
display: block;
margin: 0px auto;
margin-top: 0px;
}
footer {
text-align: right;
font-size: 12px;
height: 30px;
background-color: rgb(59, 58, 76);
width: 100%;
padding-top: 5px;
padding-bottom: 10px;
}
footer a {
text-align: right;
text-decoration: none;
display: block;
width: 960px;
margin-left: auto;
margin-right: auto;
color: black;
font-size: 12px;
padding-top: 12px;
}
footer a:hover {
text-decoration: underline;
}
#map-canvas {
height: 50%;
margin-top: 200px;
padding: 200px;
}
/* ------------ */
/* NEW MENU */
/* ------------ */
#cssmenu ul, #cssmenu li, #cssmenu span, #cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
ul {
text-align: center;
}
#cssmenu {
line-height: 1;
background: #141414;
background: -moz-linear-gradient(top, #333333 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #333333 0%, #141414 100%);
background: -o-linear-gradient(top, #333333 0%, #141414 100%);
background: -ms-linear-gradient(top, #333333 0%, #141414 100%);
background: linear-gradient(to bottom, #333333 0%, #141414 100%);
border-bottom: 2px solid #0fa1e0;
width: auto;
}
#cssmenu:after, #cssmenu ul:after {
content:'';
display: block;
clear: both;
}
#cssmenu a {
background: #141414;
background: -moz-linear-gradient(top, #333333 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #333333 0%, #141414 100%);
background: -o-linear-gradient(top, #333333 0%, #141414 100%);
background: -ms-linear-gradient(top, #333333 0%, #141414 100%);
background: linear-gradient(to bottom, #333333 0%, #141414 100%);
color: #ffffff;
display: block;
font-family: Helvetica, Arial, Verdana, sans-serif;
padding: 19px 20px;
text-decoration: none;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul > li {
display: inline-block;
margin: 0;
}
#cssmenu.align-center {
text-align: center;
}
#cssmenu.align-center > ul > li {
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul {
float: right;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu > ul > li > a {
color: #ffffff;
font-size: 12px;
}
#cssmenu > ul > li:hover:after {
content:'';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #0fa1e0;
margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
}
#cssmenu.align-right > ul > li:first-child > a, #cssmenu.align-center > ul > li:first-child > a {
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
#cssmenu.align-right > ul > li:last-child > a {
border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a, #cssmenu > ul > li:hover > a {
color: #ffffff;
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
background: #070707;
background: -moz-linear-gradient(top, #262626 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #262626), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #262626 0%, #070707 100%);
background: -o-linear-gradient(top, #262626 0%, #070707 100%);
background: -ms-linear-gradient(top, #262626 0%, #070707 100%);
background: linear-gradient(to bottom, #262626 0%, #070707 100%);
}
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#cssmenu.align-right .has-sub ul {
left: auto;
right: 0;
}
#cssmenu .has-sub ul li {
*margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
background: #0fa1e0;
border-bottom: 1px dotted #31b7f1;
font-size: 11px;
filter: none;
display: block;
line-height: 120%;
padding: 10px;
color: #ffffff;
}
#cssmenu .has-sub ul li:hover a {
background: #0c7fb0;
}
#cssmenu ul ul li:hover > a {
color: #ffffff;
}
#cssmenu .has-sub .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu.align-right .has-sub .has-sub ul, #cssmenu.align-right ul ul ul {
left: auto;
right: 100%;
}
#cssmenu .has-sub .has-sub ul li a {
background: #0c7fb0;
border-bottom: 1px dotted #31b7f1;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #0a6d98;
}
#cssmenu ul ul li.last > a, #cssmenu ul ul li:last-child > a, #cssmenu ul ul ul li.last > a, #cssmenu ul ul ul li:last-child > a, #cssmenu .has-sub ul li:last-child > a, #cssmenu .has-sub ul li.last > a {
border-bottom: 0;
}
#cssmenu {
position: fixed;
top: 0;
width: 100%;
}
.before_content {
margin-top: 80px;
}<div id='cssmenu'>
<ul>
<li><a href='#'><span>Home</span></a>
</li>
<li class='active has-sub'><a href='#'><span>Products</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Product 1</span></a>
<ul>
<li><a href='#'><span>Sub Product</span></a>
</li>
<li class='last'><a href='#'><span>Sub Product</span></a>
</li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Product 2</span></a>
<ul>
<li><a href='#'><span>Sub Product</span></a>
</li>
<li class='last'><a href='#'><span>Sub Product</span></a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>About</span></a>
</li>
<li class='last'><a href='#'><span>Contact</span></a>
</li>
</ul>
</div>
<div class="before_content"></div>
<h2 class="names">Bob + Suzy</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>I absolutely love this webpage!</p>
<p>It is soooooo cool!</p>
答案 1 :(得分：1)
尝试将其添加到CSS的底部：
#cssmenu {
position: fixed;
top: 0;
width: 100%;
}
h2 {
margin-top: 75px;
}