Cool CSS Menu Free

Want a cool and stylish menu for your website. This is a simple css tutorial of horizontal <strong>cool css menu</strong>, download the file and use it in your website for free.

HTML

<ul id="menu">
	<li><a href="#" class="active">home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Company</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

CSS

#menu
{
	margin:0px;
	padding:10px;
	background:#21c8be url(http://4.bp.blogspot.com/-_UDIdHT0NAA/VFSxDW_YgOI/AAAAAAAACro/-VJuWOOL4T4/s320/nav-bg.png) repeat-x;
	height:40px;
	display:inline-block;
	list-style:none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border:solid 1px #0f6f7a;
}
#menu li
{
float:left;	
margin:0px 5px;
}
#menu li a
{
	font-family:Arial, Helvetica, sans-serif;
	color:#fff;
	text-decoration:none;
	height:40px;
	line-height:40px;
	text-transform:capitalize;
	padding:0px 30px;
	display:block;
	color:#000;
	text-shadow:1px 1px 1px #b0f1f8;
}
#menu li a:hover
{
	background:#0f6f7a;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	box-shadow:inset 0px 0px 10px #000;
	color:#fff;
	text-shadow:none;
	box-shadow:inset 0px 0px 10px #000;
	-moz-box-shadow:inset 0px 0px 10px #000;
	-o-box-shadow:inset 0px 0px 10px #000;
	-webkit-box-shadow:inset 0px 0px 10px #000;
}
#menu li a.active
{
	background:#0f6f7a;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	box-shadow:inset 0px 0px 10px #000;
	-moz-box-shadow:inset 0px 0px 10px #000;
	-o-box-shadow:inset 0px 0px 10px #000;
	-webkit-box-shadow:inset 0px 0px 10px #000;
	color:#fff;
	text-shadow:none;
}