<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;
}