Log in to blogger account and Click drop down
Now you can see Live on blog, Click EDIT HTML Button
Find this tag by using Ctrl+F ]]></b:skin>
Paste below code Before ]]></b:skin> tag
<style>
#mobilenav {
display:none;
}
#nav {
height:40px;
background-color:#000000;
border-bottom:5px solid #01B1D3;
position:relative;
}
.sf-menu,
.sf-menu * {
margin:0;
padding:0;
list-style:none;
}
.sf-menu li {
position:relative;
}
.sf-menu ul {
position:absolute;
display:none;
top:100%;
left:0;
z-index:99;
}
.sf-menu > li {
float:left;
margin:0 1px;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
display:block;
}
.sf-menu a {
display:block;
position:relative;
}
.sf-menu > li > a {
font-size:125%;
}
.sf-menu ul ul {
top:0;
left:100%;
}
.sf-menu {
float:left;
}
.sf-menu ul {
min-width:12em;
*width:12em;
}
.sf-menu a {
padding:0 10px;
height:40px;
line-height:40px;
text-decoration:none;
zoom:1;
}
.sf-menu a.home {
background-color:#01B1D3;
text-indent:-9999px;
padding:0;
width:45px;
margin-left:4px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXOJLhHaSHII54Ge6_5_OR8LKTC1t6pcZ15kSn97qZdb4RcSr65_nD_3-QoV9nRuRmzGSYGdEiYvYbm7LnAi-kn_qyLUnwidVyxqlVyLof_XKUNjeteISe83upfi5V7T3Tpyy2hCyj82g/w25/home.png);
text-indent:-9999px;
background-repeat:no-repeat;
background-position:10px 5px;
}
.sf-menu a {
color:#FAFAFA;
font-size:120%;
}
.sf-menu li {
white-space:nowrap;
*white-space:normal;
-moz-transition:background-color .2s;
-webkit-transition:background-color .2s;
transition:background-color .2s;
position:relative;
}
.sf-menu ul li {
background-color:#01B1D3;
}
.sf-menu ul a {
font-weight:normal;
height:30px;
line-height:30px;
}
.sf-menu ul a:hover {
padding-left:12px;
}
.sf-menu ul ul li {
background:#01B1D3;
}
.sf-menu li:hover > a,
.sf-menu li.sfHover,
.sf-menu > li > a.current {
background-color:#01B1D3;
-moz-transition:none;
-webkit-transition:none;
transition:none;
}
.sf-arrows .sf-with-ul {
padding-right:2em;
*padding-right:1em;
}
.sf-arrows .sf-with-ul:after {
content:'';
position:absolute;
top:50%;
right:0.75em;
margin-top:-3px;
height:0;
width:0;
border:5px solid transparent;
border-top-color:#FAFAFA;
}
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
border-top-color:white;
}
.sf-arrows ul .sf-with-ul:after {
margin-top:-5px;
margin-right:-3px;
border-color:transparent;
border-left-color:#FAFAFA;
}
.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
border-left-color:white;
}
.sf-menu li > i {
position:absolute;
top:0;
right:5px;
width:30px;
height:30px;
cursor:pointer;
display:none;
background-color:#CCC;
}
</style>
Go to blogger and click Layout
Click Add Gadget and select 'HTML/Javascript
Paste below code. (Replace # with your links.)
<nav class="navix" id="nav">
<ul class="sf-menu" id="menunav">
<li>
<a href="#">Menu</a>
<ul>
<li>
<a href="#">Drop Down</a>
</li>
<li>
<a href="#">Drop Down1</a>
</li>
<li>
<a href="#">Drop Down2</a>
</li>
<li>
<a href="#">Drop Down3</a>
</li>
<li>
<a href="#">Drop Down4</a>
</li>
<li>
<a href="#">Drop Down5</a>
</li>
<li>
<a href="#">Drop Down6</a>
</li>
</ul>
<i></i></li>
<li>
<a href="#">Menu1</a>
<ul>
<li>
<a href="#">Drop Down</a>
</li>
<li>
<a href="#">Drop Down1</a>
<i></i></li>
<li>
<a href="#">Drop Down2</a>
<li>
<a href="#">Drop Down3</a>
</li>
<li>
<a href="#">Drop Down4</a>
<ul>
<li>
<a href="#">Drop Down4.1</a>
</li>
<li>
<a href="#">Drop Down4.2</a>
</li>
</ul>
<i></i></li>
</li>
</ul>
<i></i></li>
<li>
<a href="#">Menu2</a>
</li>
<li>
<a href="#">Menu3</a>
<ul>
<li>
<a href="#">Drop Down</a>
</li>
<li>
<a href="#">Drop Down1</a>
</li>
<li>
<a href="#">Drop Down2</a>
</li>
</ul>
<i></i></li>
<li>
<a href="#">Menu4</a>
</li>
<li>
<a href="#">Menu5</a>
<ul>
<li>
<a href="#">Drop Down1</a>
</li>
<li>
<a href="#">Drop Down2</a>
</li></ul></nav>
Now save your HTML/Javascript'. You are done.
