<ul class="navbar">
<li class="nav"><a href="#">Browser Side</a></li>
<li class="nav"><a href="#">Server Side</a></li>
<li class="nav"><a href="#">Programming</a></li>
<li class="nav"><a href="#">XML</a></li>
<li class="nav"><a href="#">Web Building</a></li>
<li class="nav"><a href="#">Reference</a></li>
</ul>
body {
height: 1000px;
}
a {
text-decoration: none;
}
.navbar {
width: 1211px;
height: 48px;
background-color: #e8e7e3;
margin: 100px auto;
/* 添加粘滞定位 */
position: sticky;
top: 0;
}
.nav {
float: left;
width: 100px;
line-height: 48px;
}
.nav a {
display: block;
text-align: center;
font-size: 14px;
font-family: Helvetica;
color: #777777;
}
.nav a:hover {
background-color: #3f3f3f;
color: #e8e7e3;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.