Cool CSS Menu Free

Want a cool and stylish menu for your website. This is a simple css tutorial of horizontal cool css menu, download the file and use it in your website for free.
How to make Cool CSS Menu

CSS Code

#menu
{
 margin:0px;
 padding:10px;
 background:#21c8be url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRSTBcEU2RdA8CAAY7jroTKg9UyJ7KlBom21ZJd4qrT-EDDOV1wtHRv-WNrW3-huGnu-oieXFZgMOSIANFeXtn_sXEENJYa18PXBc_fAzDD2oLjg_S07hnGTjdMKaX1gORMPKjqr7wA3uT/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;
}

HTML Code

home
About Us
Company
Services
Contact Us

View Code Download File Used in this example View Live Demo

Total Downloads: