保持菜单栏在没有位置的顶部：固定

Question

这是小提琴的链接。 我在顶部有一个不错的菜单栏，但是当用户向下滚动时它不会留下来。 当我尝试更改 CSS 以在第一个#cssmenu下包含position:fixed ，一切都会变得不正常。

这是代码片段中的代码：

 @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>

Answer 1

这应该有帮助。 添加了.before_content类以在菜单和内容之间.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>

Answer 2

尝试将其添加到 CSS 的底部：

#cssmenu {
    position: fixed;
    top: 0;
    width: 100%;
}

h2 {
    margin-top: 75px; 
}

https://jsfiddle.net/lemoncurry/hLwh5wpr/