Add Red & Black CSS3 Hover Effect Navigation Menu Bar

How To Add Red & Black CSS3 Hover Effect  Navigation Menu Bar For Blogger

1. Log in to blogger account
2. Now select "Template"
3. Now Click EDIT HTML Button"
4. Find this tag by using Ctrl+F ]]></b:skin>
5. Paste below code Before ]]></b:skin>

/* The CSS Code for the menu starts here bloggersstand.blogspot.com */
#navigation { width:900px;height: 45px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibDe8eRuh8pimuImONsU95MmjmkXaKTGFDFuC4bRCk8B7dom5YhtYUMLcMYFHPgSeWgTfMDQdYJPYaGJ3mlgfItzXJXKgdpozNdJJzm2JnQPMh9dgaWIob3Oj5wmulxNM4BVf6AMxElX4/s1600/nav-bg.gif) repeat-x 0 0;
border:inherit 2px #000000;
-moz-border-radius-topleft: 10px;-moz-border-radius-topright:10px;-moz-border-radius-bottomleft:10px;-moz-border-radius-bottomright:10px;-webkit-border-top-left-radius:10px;-webkit-border-top-right-radius:10px;-webkit-border-bottom-left-radius:10px;-webkit-border-bottom-right-radius:10px;
border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px; }
#navigation ul { list-style: none outside; padding: 8px 0 0 8px; }
#navigation li { float: left; display: inline; height: 29px; line-height: 29px; text-transform: uppercase; margin-right: 3px }
#navigation li.last { margin-right: 0; }
#navigation li a,
#navigation li a span { float: left; display: inline; height: 29px; padding-left: 10px; background-position: 0 0; color: #919191; }
#navigation li a span { padding-left: 0; padding-right: 10px;  background-position: right 0; }
#navigation ul.sf-menu li a:hover,
#navigation ul.sf-menu li a:hover span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7xUsoX7KMHEEYsqW9MawPKOlx38WsRFAD4mNVuHUKlp0tOK3Hq1xPFaLTrkBLqtb38uiiRq7zjipJN-P0Eu0ayiVFp3dQ17wtwXSZ74AAUQDyeQrVaTPfpyGwGDLm1W_Lmq6atID1v9E/s1600/nav-states-red.gif); text-decoration: none; color: #fff; }
#navigation li a.clicked,
#navigation li a.clicked span { background-position: 0 bottom }
#navigation li a.clicked span { background-position: right bottom; }

6. Go to blogger and click Layout
7. Click Add Gadget and select 'HTML/Javascript
8. Paste below code.

<div id="navigation">
<ul class="sf-menu sf-js-enabled sf-shadow">
<li class="cat-item cat-item-29"><a title="Home" href="#"><span>HOME</span></a></li>
<li class="cat-item cat-item-29"><a href="#" title="Graphics"><span>Graphics</span></a></li>
<li class="cat-item cat-item-31"><a href="#" title="Coding"><span>Coding</span></a></li>
<li class="cat-item cat-item-18"><a href="#" title="inspiration"><span>inspiration</span></a> </li>
<li class="cat-item cat-item-1"><a href="#" title="Photography"><span>Photography</span></a></li>
<li class="cat-item cat-item-30"><a href="#" title="Freebies"><span>Blogger</span></a></li>
<li class="cat-item cat-item-19"><a href="#" title="Wordpress"><span>Wordpress</span></a></li>
<li class="cat-item cat-item-25"><a href="#" title="Logo"><span>Logo</span></a></li>
<li class="cat-item cat-item-22"><a href="#" title="Contact"><span>Contact</span></a>
</li></ul></div>

 *Change All # With Your Links.

9. Now save your HTML/Javascript'. Done!