Today in this article we are showing you a pure CSS3 menu, no images or JavaScript used. Here are used two CSS files.
RESET.CSS – Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.
STYLE.CSS – This file contains all of the specific styling's for the menu.
How to add it to blogger blog
1. Go to your Blogger Dashboard>> Template and paste the following html5 reset style sheet link before closing your <head> tag.
<link href="https://dl.dropboxusercontent.com/u/223738947/html5-reset.css" type="text/css" rel="stylesheet">
2. Go to Layout > Add A Gadget and select HTML/JavaScript gadget.
3. Copy the HTML link and paste it inside the content box.
<style>
#nav_menu {
width: 100%;
margin: 10px;
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: bold;
margin-right: auto;
margin-left: auto;
text-transform: capitalize;
}
#nav_menu ul {
float: auto;
overflow: hidden;
margin:0 auto;
text-align: center;
}
#nav_menu:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
#nav_menu a {
display:block;
padding: 10px 30px;
color: #fff;
margin: 0 auto;
text-decoration: none;
text-shadow: 0 1px #333;
text-align:center;
}
#nav_menu a:hover {
color: #FFF;
text-shadow: 0 2px #000;
}
#nav_menu li {
text-align: center;
display: inline-block;
margin: 0 auto;
border-style: solid;
border-width: 1px;
border-color: #005fa1 #005fa1 #005fa1 #005fa1;
background: #0096ff; /* Old browsers */
background: -moz-linear-gradient(top, #0096ff 0%, #006bb6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0096ff), color-stop(100%,#006bb6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #0096ff 0%,#006bb6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #0096ff 0%,#006bb6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #0096ff 0%,#006bb6 100%); /* IE10+ */
background: linear-gradient(top, #0096ff 0%,#006bb6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0096ff', endColorstr='#006bb6',GradientType=0 ); /* IE6-9 */
}
#nav_menu li:hover {
background: #404040; /* Old browsers */
background: -moz-linear-gradient(top, #404040 0%, #252525 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,##404040), color-stop(100%,#252525)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, ##404040 0%,#252525 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #404040 0%,#252525 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #404040 0%,#252525 100%); /* IE10+ */
background: linear-gradient(top, #404040 0%,#252525 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#404040', endColorstr='#252525',GradientType=0 ); /* IE6-9 */
border-color: #252525;
}
#nav_menu li:first-child {
border-color: none;
border-radius: 100px 0 0 100px;
}
#nav_menu li:last-child {
border-color: none;
border-radius: 0 100px 100px 0;
}
#nav_menu li:first-child a:hover {
border-color: #252525;
}
</style>
<!-- begin navigation -->
<nav id="nav_menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Faqs</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!-- end navigation -->
I have ran tests on both Mac and Windows versions of the latest Chrome, Safari, Firefox. Worked everywhere as it should.
To rename the category, simply replace
Home with your own text. As for the link, just replace # with the Page intended URL. Hope you enjoyed with this tutorial, don’t forget to tell thanks and leave a comment 
Enjoy..!!