How To Add Click Style Tabs 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>

#bloggersstand_tabmenu {font-family:arial;font-size:16px;line-height:1.8em;background:#333;
display:table;padding:0;margin:1em auto;border-spacing:0;padding:0.5em;
border-radius:0.5em;border:1px solid #777;box-shadow:0 0 3px #999;
white-space:nowrap;}
#bloggersstand_tabmenu li p {border-radius: 0.5em 0.5em 0 0 ; }
#bloggersstand_tabmenu li ul li:last-child a {border-radius: 0 0 0.5em 0.5em ;}
#bloggersstand_tabmenu ul {display:table;margin:0;padding:0;position:absolute;
left:-9999px;z-index:1;top:1.6em;}
#bloggersstand_tabmenu > li {display:inline-block;width:150px;vertical-align:top;position:relative;white-space:normal;}
#bloggersstand_tabmenu ul li {float:right;list-style-type:none;clear:right;height:1.6em;}
#bloggersstand_tabmenu li a , #bloggersstand_tabmenu p {border:solid 1px #333;background-color:gray;background-image:linear-gradient(90deg,#aaa,#eee);
display:block;width:150px;text-indent:1em;margin:0;outline:0;text-decoration:none;color:#333;}
#bloggersstand_tabmenu li a {box-shadow: 0px 3px 10px -5px black;float:right;}
#bloggersstand_tabmenu p {position:relative;height:1.6em;}
#bloggersstand_tabmenu p:after {content:'\25BC';position:absolute;right:5px;text-shadow:1px 1px 1px gray;}
#bloggersstand_tabmenu p:focus:after {content:'';}
#bloggersstand_tabmenu p a {display:inline;position:absolute;border:0;left:-9999px;background:transparent;
color:#E68F28;text-shadow:0 0 1px black,0 0 2px white;text-decoration:none;text-align:right;width:auto;
padding-right:5px;}
#bloggersstand_tabmenu p:focus a {top:0;left:0;right:0;bottom:0;}
#bloggersstand_tabmenu ul a:focus , #bloggersstand_tabmenu p:focus + ul li a {margin-left:9999px;}
#bloggersstand_tabmenu a:focus:before {content:'\25BA';margin-left:-1em;color:#E9CF5F;}
:focus {font-variant:small-caps;text-shadow:0 0 1px #333, 0 0 5px gray;}
[tabindex] {cursor:pointer;}
#bloggersstand_tabmenu ul ul{left:150px;position:relative;top:-1.95em;width:150px;display:table;margin:0 0 0 -9999px;z-index:1;}
#bloggersstand_tabmenu ul ul a {margin-left:-9999px;}
#bloggersstand_tabmenu ul ul li a:focus {margin-left:19998px;}
#bloggersstand_tabmenu ul ul li:first-child a {border-radius:0 0.5em 0 0 ;}
#bloggersstand_tabmenu ul li a:focus.fermoir + ul {
margin-left:10001px;}
#bloggersstand_tabmenu ul li .fermoir {position:absolute;z-index:1;right:1px;margin-top:1px;border:0;width:auto;background:none;box-shadow:none;
padding: 0 5px 0 20px;text-indent:0;line-height:1.4em;}
.fermoir:before {display:none;}
#bloggersstand_tabmenu ul li .fermoir:focus , p#bloggersstand_tabmenu {color:white;}

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

<div id="bloggersstand_tabmenu">
<li> Menu List <a href="#" tabindex="-1" title=""# class="fermoir">▲</a>
<ul>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
</ul>
</li>

<li> Menu List <a href="#" tabindex="-1" title="" class="fermoir">▲</a>
<ul>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a><a class="fermoir" tabindex="-1" onclick="" href="#none">►</a>
<ul>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
</ul>
</li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
</ul>
</li>

<li> Menu List <a href="#" tabindex="-1" title="" class="fermoir">▲</a>
<ul>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
</ul>
</li>
<li> Menu List <a href="#" tabindex="-1" title="" class="fermoir">▲</a>
<ul>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a><a class="fermoir" tabindex="-1" onclick="" href="#none">►</a>
<ul>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
</ul>
</li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
</ul>
</li>

<li> Menu List <a href="#" tabindex="-1" title="" class="fermoir">▲</a>
<ul>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
<li><a href="#" tabindex="0" >List</a></li>
</ul>
</li>
</div>