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

Question

Here's a link to the fiddle. 我在顶部有一个不错的菜单栏，但是当用户向下滚动时它不会保留。当我尝试更改 CSS 以在第一个 #cssmenu 下包含 position:fixed 时，一切都变得异常。

这是sn-p里面的代码：

@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 类以在菜单和内容之间留出边距。

#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/