Cool CSS3 navigation menu

W

e all try to be very creative when it comes to designing a website navigation. It’s a sure thing: a good looking navigation menu can really enhance your website.
I wrote before about how to create different menus and today you’ll learn how to create another stylish CSS3 navigation menu.

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

nav  {
 display: block;
 width: 100%;
 overflow: hidden;
}

nav ul {
 margin: 80px 0 20px 0;
 padding: .7em;
 float: left;
 list-style: none;
 background: #444;
 background: rgba(0,0,0,.2);
 -moz-border-radius: .5em;
 -webkit-border-radius: .5em;
 border-radius: .5em;    
 -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
 -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset;
 box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset; 
}

nav li {
 float:left;
}

nav a {
 float:left;
 padding: .8em 1.5em;
 text-decoration: none;
 color: #555;
 text-shadow: 0 1px 0 rgba(255,255,255,.5);
 font: bold 1.1em/1 'trebuchet MS', Arial, Helvetica;
 letter-spacing: 1px;
 text-transform: uppercase;
 border-width: 1px;
 border-style: solid;
 border-color: #fff #ccc #999 #eee;
 background: #c1c1c1;
 background: -moz-linear-gradient(#f5f5f5, #c1c1c1);
 background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#c1c1c1));
 background: -webkit-linear-gradient(#f5f5f5, #c1c1c1);
 background: -o-linear-gradient(#f5f5f5, #c1c1c1);
 background: -ms-linear-gradient(#f5f5f5, #c1c1c1);
 background: linear-gradient(#f5f5f5, #c1c1c1);            
 }
 
nav a:hover, nav a:focus {
 outline: 0;
 color: #fff;
 text-shadow: 0 1px 0 rgba(0,0,0,.2);
 background: #fac754;
 background: -moz-linear-gradient(#fac754, #f8ac00);
 background: -webkit-gradient(linear, left top, left bottom, from(#fac754), to(#f8ac00));
 background: -webkit-linear-gradient(#fac754, #f8ac00);
 background: -o-linear-gradient(#fac754, #f8ac00);
 background: -ms-linear-gradient(#fac754, #f8ac00);
 background: linear-gradient(#fac754, #f8ac00);
}

nav a:active {
 -moz-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
 -webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
 box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
}
 
nav li:first-child a {
 border-left: 0;
 -moz-border-radius: 4px 0 0 4px;
 -webkit-border-radius: 4px 0 0 4px;
 border-radius: 4px 0 0 4px;            
}

nav li:last-child a {
 border-right: 0;
 -moz-border-radius: 0 4px 4px 0;
 -webkit-border-radius: 0 4px 4px 0;
 border-radius: 0 4px 4px 0;            
}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Categories</a></li>
        <li><a href="#">About</a></li>    
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

Replace # with your link

10. Now save your HTML/Javascript'.

    You are done...