How To Add Cool Horizontal CSS Menu Bar For Blogger

How To Add Cool Horizontal CSS Menu Bar For Blogger 

 

Demo here

1. Log in to your blogger account and Go to Design >>page Element

2.Click Add gadget and Select 'HTML/JavaScript' 

3. Now paste paste below code

<style>
#nav1 {
 margin: 0;
 padding: 6px 7px 0;
 height:37px;
 background: #7d7d7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKEfyMxVMSyhNkj15uLJIgFVrCyVHplqsJt9TtzEQbk3uuuxanMDFabt586vm1UWEIY4FNwH3QnshKZ1fh7QDKqkTDf75pf9oxPLnQ4MalCeKYFDlZ5KBKMrNkdU5c0k_-8ByKWwxDKD6e/s320/image1.png) repeat-x 0 -110px;
 line-height: 100%;

 border-radius: 3em;
 -webkit-border-radius: 3em;
 -moz-border-radius: 3em;

 -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
 -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav1 li {
 margin: 0 5px;
 padding: 0 0 8px;
 float: left;
 position: relative;
 list-style: none;
}


/* main level link */
#nav1 a {
 font-weight: bold;
 color: #000000;
 text-decoration: none;
 display: block;
 padding:  8px 20px;
 margin: 0;

 -webkit-border-radius: 1.6em;
 -moz-border-radius: 1.6em;

 text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav1 a:hover {
 background: #000;
 color: #fff;
}

/* main level link hover */
#nav1 .current a, #nav1 li:hover > a {
 background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5lZunxaMnv8ezHMwKYWSO2l2q9hwtbM3KK5_hdvtAiFiCMMbabyVI7_iKJG73Gq50246fGSSLKBWWSsFruA8NiFEPwsUSykhpfMDTiG0rExvL3R4MyCmMAGrDuqXLtz0hCJC2waMEcMgg/s320/image1.png) repeat-x 0 -40px;
 color: #444;
 border-top: solid 1px #f8f8f8;

 -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
 -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
 box-shadow: 0 1px 1px rgba(0,0,0, .2);

 text-shadow: 0 1px 0 rgba(255,255,255, 1);
}

/* sub levels link hover */
#nav1 ul li:hover a, #nav li:hover li a {
 background: none;
 border: none;
 color: #666;

 -webkit-box-shadow: none;
 -moz-box-shadow: none;
}
#nav1 ul a:hover {
 background: #0078ff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5lZunxaMnv8ezHMwKYWSO2l2q9hwtbM3KK5_hdvtAiFiCMMbabyVI7_iKJG73Gq50246fGSSLKBWWSsFruA8NiFEPwsUSykhpfMDTiG0rExvL3R4MyCmMAGrDuqXLtz0hCJC2waMEcMgg/s320/image1.png) repeat-x 0 -100px !important;
 color: #fff !important;

 -webkit-border-radius: 0;
 -moz-border-radius: 0;

 text-shadow: 0 1px 1px rgba(0,0,0, .1);
}

/* dropdown */
#nav1 li:hover > ul {
 display: block;
}

/* level 2 list */
#nav1 ul {
 display: none;

 margin: 0;
 padding: 0;
 width: 185px;
 position: absolute;
 top: 35px;
 left: 0;
 background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKEfyMxVMSyhNkj15uLJIgFVrCyVHplqsJt9TtzEQbk3uuuxanMDFabt586vm1UWEIY4FNwH3QnshKZ1fh7QDKqkTDf75pf9oxPLnQ4MalCeKYFDlZ5KBKMrNkdU5c0k_-8ByKWwxDKD6e/s320/image1.png) repeat-x 0 0;
 border: solid 1px #b4b4b4;

 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;

 -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
 -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
 box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav1 ul li {
 float: none;
 margin: 0;
 padding: 0;
}

#nav1 ul a {
 font-weight: normal;
 text-shadow: 0 1px 0 #fff;
 font-weight: bold;
 color: #000000;
}

/* level 3+ list */
#nav1 ul ul {
 left: 181px;
 top: -3px;
}

/* rounded corners of first and last link */
#nav1 ul li:first-child > a {
 -webkit-border-top-left-radius: 9px;
 -moz-border-radius-topleft: 9px;

 -webkit-border-top-right-radius: 9px;
 -moz-border-radius-topright: 9px;
}
#nav1 ul li:last-child > a {
 -webkit-border-bottom-left-radius: 9px;
 -moz-border-radius-bottomleft: 9px;

 -webkit-border-bottom-right-radius: 9px;
 -moz-border-radius-bottomright: 9px;
}

/* clearfix */
#nav1:after {
 content: ".";
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0;
}
#nav1 {
 display: inline-block;
}
</style>
<ul id="nav1">
<li class="current"><a href="/">Home</a></li>
<li><a href="3">level1</a>

<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
<li><a href="#">Multi-Levels</a>

<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>

* Replace with # your links.
* Replace with  link  your names.

4. Now save 'HTML/JavaScript'.  you are done.