Fixed top menu in css

Many time we require a menu that is fixed at top of the website, so here is the tutorial of <strong>Fixed top menu in CSS</strong>. Use this simple CSS code to add this menu to your website.

HTML

<div id="top-menu">
	<ul>
    	<li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Our Works</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</div>

CSS

body
{
	margin:0px;
	padding:0px;
}
#top-menu
{
	width:100%;
	height:50px;
	background:#0C9;
	position:fixed;
}
#top-menu ul
{
	margin:0px;
	padding:0px;
	display:table;
	list-style:none;
	width:100%;
}
#top-menu ul li
{
	display:table-cell;
	text-align:center;
}
#top-menu ul li a
{
	display:block;
	height:50px;
	line-height:50px;
	text-decoration:none;
	color:#000;
	text-transform:uppercase;
}