我正在尝试做到这一点，以便在我的网站上向下滚动时，我的下拉菜单将保留在屏幕顶部(因此无论您向下滚动多远，网站菜单始终位于顶部)。这是我在我的网站上使用的 css 和菜单。有人可以帮助我吗？我已经尝试了几天但没有成功。
<style>
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu: after, #cssmenu ul: after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
color: #FF0000;
display: inline-block;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
min-width: 35px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 #000;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu > ul > li.active a {
background: #000 url(grad_dark.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #000 0%, #000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000), color-stop(100%, #000));
background: -webkit-linear-gradient(top, #000 0%, #000 100%);
background: -o-linear-gradient(top, #000 0%, #000 100%);
background: -ms-linear-gradient(top, #000 0%, #000 100%);
background: linear-gradient(to bottom, #000 0%, #000 100%);
filter: progid: dximagetransform.microsoft.gradient(startColorstr='#000', endColorstr='#000', GradientType=0);
box-shadow: inset 0 0 10px #000, inset 0 10px 10px #000;
-moz-box-shadow: inset 0 0 10px #000, inset 0 10px 10px #000;
-webkit-box-shadow: inset 0 0 10px #000, inset 0 10px 10px #000;
filter: none;
}
#cssmenu > ul > li.active a: hover {
background: -moz-linear-gradient(top, #000 0%, #000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000), color-stop(100%, #000));
background: -webkit-linear-gradient(top, #000 0%, #000 100%);
background: -o-linear-gradient(top, #000 0%, #000 100%);
background: -ms-linear-gradient(top, #000 0%, #000 100%);
background: linear-gradient(to bottom, #000 0%, #000 100%);
filter: progid: dximagetransform.microsoft.gradient(startColorstr='#000', endColorstr='#000', GradientType=0);
filter: none;
}
#cssmenu > ul > li a {
box-shadow: inset 0 0 0 1px #000;
-moz-box-shadow: inset 0 0 0 1px #000;
-webkit-box-shadow: inset 0 0 0 1px #000;
background: #000 url(grad_dark.png) repeat-x left top;
background: -moz-linear-gradient(top, #000 0%, #000 50%, #000 51%, #000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000), color-stop(50%, #000), color-stop(51%, #000), color-stop(100%, #000));
background: -webkit-linear-gradient(top, #000 0%, #000 50%, #000 51%, #000 100%);
background: -o-linear-gradient(top, #000 0%, #000 50%, #000 51%, #000 100%);
background: -ms-linear-gradient(top, #000 0%, #000 50%, #000 51%, #000 100%);
background: linear-gradient(to bottom, #000 0%, #000 50%, #000 51%, #000 100%);
filter: progid: dximagetransform.microsoft.gradient(startColorstr='#000', endColorstr='#000', GradientType=0);
border-bottom: 1px solid #000;
border-top: 1px solid #000;
border-right: 1px solid #000;
line-height: 34px;
padding: 0 35px;
filter: none;
}
#cssmenu > ul > li a: hover {
background: #000 url(grad_dark.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #000 0%, #000 50%, #000 51%, #525252 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000), color-stop(50%, #000), color-stop(51%, #000), color-stop(100%, #525252));
background: -webkit-linear-gradient(top, #000 0%, #000 50%, #000 51%, #525252 100%);
background: -o-linear-gradient(top, #000 0%, #000 50%, #000 51%, #525252 100%);
background: -ms-linear-gradient(top, #000 0%, #000 50%, #000 51%, #525252 100%);
background: linear-gradient(to bottom, #000 0%, #000 50%, #000 51%, #c 100%);
filter: progid: dximagetransform.microsoft.gradient(startColorstr='#000', endColorstr='#000', GradientType=0);
filter: none;
}
#cssmenu > ul > li: first-child a {
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
border-left: 1px solid #000;
}
#cssmenu > ul > li: last-child a {
border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
}
#cssmenu .has-sub: hover ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
top: 36px;
left: -1px;
min-width: 100%;
text-align: center;
/* IE7 */
*width: 100%;
}
#cssmenu .has-sub ul li {
text-align: center;
}
#cssmenu .has-sub ul li a {
border-top: 0 none;
border-left: 1px solid #000;
display: block;
line-height: 120%;
padding: 9px 5px;
text-align: center;
}
</style>
<div id='cssmenu'>
<ul>
<li class='Stream Portal'><a href="./home.html" >Home</a>
</li>
<li class='has-sub'><a href="./home.html" >TV</a>
<ul>
<li><a href="./justintv.html" >Justin</a></li>
<li><a href="http://lmtv.us/#" >LM</a></li>
<li><a href="http://www.mtv.com/ontv/" >MTV</a></li>
<li><a href="http://www.spike.com/episodes" >Spike</a></li>
<li><a href="http://www.cartoon-world.tv/cartoon-list/" >Toon</a></li>
<li><a href="./tubtub.html" >TubTub</a></li>
<li class='last'><a href="shows" >Veetle</a></li>
</ul>
</li>
<li class='has-sub'><a href="./home.html" >Movies</a>
<ul>
<li><a href="./moviesearchframe.html" >Movie Search</a></li>
<li><a href="http://topdocumentaryfilms.com/" >Documentaries</a></li>
<li><a href="http://freeonlinemoviestream.co/" >Movie Stream</a></li>
<li><a href="./megashare.html" >MegaShare</a></li>
<li><a href="http://www.cartoon-world.tv/movie-list/" >Toon</a></li>
<li class='last'><a href="http://watch32.com/new-movies.html" >Watch32</a></li>
</ul>
</li>
</ul>
</div>
最佳答案
#cssmenu {position:fixed;top:0px}
关于javascript - 滚动时将网站菜单保留在屏幕上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20864686/