<p>This is some page contents.</p> <p>This is some page contents.</p>
<p>This is some page contents.</p> <p>This is some page contents.</p>
<ul id="stickymenu" class="solidblockmenu">
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/" class="current">CSS Examples</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Webmaster Tools</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript</a></li>
<li><a href="http://www.cssdrive.com">Gallery</a></li>
</ul>
<h3>A pure CSS sticky menu using CSS "<code>positon:sticky</code>". The target element also has a <code>top</code> property defined to tell the browser how to position the menu when it's sticky. Without it the menu will behave like a regular relatively positioned element.</h3>
<p>Menu works in IE Edge and all modern browsers.</p>
<hr />
<p>This is some page contents.</p> <p>This is some page contents.</p>
<p>This is some page contents.</p> <p>This is some page contents.</p>
<div style="height:1000px"></div>
body{
padding: 0;
margin: 0;
}
p{
margin: 10px;
}
.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 14px Arial;
width: 100%;
overflow: hidden;
top: 0;
position: sticky;
margin-bottom: 1em;
border: 1px solid #625e00;
background: black;
border-width: 1px 0;
}
.solidblockmenu li{
display: inline;
}
.solidblockmenu li a{
float: left;
color: white;
padding: 12px 11px;
text-decoration: none;
border-right: 1px solid white;
}
.solidblockmenu li a:visited{
color: white;
}
.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: darkred;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.