You can visit this below demo button.
How to add this CSS3 Dropdown Menu?
Step 1: Login your blogger then >> Go to Template and Edit HTML
Step 2: In the HTML Code area just click on anywhere on the code area and press CTRL+F or Command+F (Mac) then copy this below tag to paste in the search column and press Enter.
]]></b:skin>
Step 3: Copy this below code HTML code and paste in above code ]]></b:skin>
/*--[Menu]--------------------------*/
#menu-container {
background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 );
border-radius: 0px 0px 0px 0px;
border:5px solid rgba(0,0,0,0.1);
clear: both;
box-shadow: 0px 0px 0 rgba(255, 255, 255, 0.8) inset;
height: 46px;
padding-top: 0px;
margin-top:0px;
}
#blogger-menu {
float: left;
}
#blogger-menu a {
text-decoration: none;
}
#blogger-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#blogger-menu > ul > li {
float: left;
padding-bottom: 12px;
}
#blogger-menu ul li a {
box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;
border-color: #D1D1D1;
border-image: none;
border-style: solid;
border-width: 0 1px 0 0;
color: #333333;
display: block;
font-size: 16px;
height: 25px;
line-height: 25px;
padding: 11px 22px 10px;
text-shadow: 0 0px 0 #FFFFFF;
}
#blogger-menu ul li a:hover {
background: -webkit-linear-gradient(#049ae0, #049ae0) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#00c7f9, #00c7f9) repeat scroll 0 0 transparent;
background: linear-gradient(#049ae0, #049ae0) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#049ae0', endColorstr='#049ae0',GradientType=0 );
color: #fff;
}
#blogger-menu > ul > li:first-child > a {
border-radius: 0 0 0 0px;
}
#blogger-menu ul ul {
background: -webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
background: -moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
background: linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 );
border-radius: 1px 0px 0px 0px;
border: 0px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 0 #FFFFFF inset;
height: 0;
margin-top: 1px;
opacity: 0;
overflow: hidden;
width: 240px;
padding: 0;
position: absolute;
visibility: hidden;
z-index: 1;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
#blogger-menu ul li:hover ul {
margin-top: 0\2;
height: auto;
opacity: 1;
visibility: visible;
}
#blogger-menu ul ul a {
border-right-width: 0;
border-top: 1px solid #D1D1D1;
box-shadow: 0 1px 0 #FFFFFF inset;
color: #444444;
height: 24px;
line-height: 24px;
padding: 7px 12px;
text-shadow: 0 1px 0 #FFFFFF;
}
#blogger-menu ul ul a:hover {
background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 );
color: #444444;
}
#blogger-menu ul ul li:first-child a {
border-top-width: 0;
}
#menu-search {
margin:8px 10px 0 0;
float: right;
}
#menu-search form {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXDNa7-I6J8w7bXDYG_yqKr3V5AXslsHJbIVvAGn74G62N-VHA3OXBF2u_ea2HKRtiHI85aNAUPx4wjL3MvPXC6jfjuz8mcUO7CYTpv2wdIwE_Nu78tevDev5JB2xolRVGP8yALiMypkff/s1600/menu-search.gif") no-repeat scroll 5% 50% transparent;
border: 1px solid #CCCCCC;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;
height: 28px;
padding: 0 25px;
position: relative;
width: 130px;
}
#menu-search form:hover {
background-color: #ffffff;
}
#menu-search form input {
color: #999999;
font-size: 13px;
height: 26px;
text-shadow: 0 1px 0 #FFFFFF;
background: none repeat scroll 0 0 transparent;
border: medium none;
float: left;
outline: medium none;
padding: 0;
width: 100%;
}
#menu-search form input.placeholder, #menu-search form input:-moz-placeholder {
color: #C4C4C4; }
Step 4: Press CTRL+F or Command+F (Mac) then copy this below </header> tag to paste in the search column and press Enter.
Step 5: Copy these below code and paste below it.
<div id='menu-container'>
<nav id='blogger-menu'>
<ul>
<li class='active'><a href='/'>Home</a></li>
<li><a href='#'>Menu 1</a>
<ul>
<li><a href='#'>Child Menu 1</a></li>
<li><a href='#'>Child Menu 2</a></li>
<li><a href='#'>Child Menu 3</a></li>
<li><a href='#'>Child Menu 4</a></li>
<li><a href='#'>Child Menu 5</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a>
<ul>
<li><a href='#'>Child Menu 1</a></li>
<li><a href='#'>Child Menu 2</a></li>
<li><a href='#'>Child Menu 3</a></li>
<li><a href='#'>Child Menu 4</a></li>
<li><a href='#'>Child Menu 5</a></li>
</ul>
</li>
<li><a href='#'>Menu 3</a>
<ul>
<li><a href='#'>Child Menu 1</a></li>
<li><a href='#'>Child Menu 2</a></li>
<li><a href='#'>Child Menu 3</a></li>
<li><a href='#'>Child Menu 4</a></li>
<li><a href='#'>Child Menu 5</a></li>
</ul>
</li>
<li><a href='#'>Menu 4</a>
<ul>
<li><a href='#'>Child Menu 1</a></li>
<li><a href='#'>Child Menu 2</a></li>
<li><a href='#'>Child Menu 3</a></li>
<li><a href='#'>Child Menu 4</a></li>
<li><a href='#'>Child Menu 5</a></li>
</ul>
</li>
<li><a href='#'>Menu 7</a></li>
<li><a href='#'>Menu 8</a></li>
</ul> </nav>
<!-- menu-search form -->
<div id='menu-search'>
<form action='/search' method='get'>
<input autocomplete='off' name='q' placeholder='search...' type='text' value=''/>
</form>
</div>
</div>
</div>
Step 6: Now start to replace the symbol of # to your URL and replace in red with your menu titles.
Note: If would like to remove the a whole dropdown menu just start from <ul>xxxxx</ul>, which highlighted in yellow and if you would like to remove any child menu just remove from <li>xxxxx</li>
The last thing to do is; checking from step #2 - #6, if everything is correct just click on "Save Template" button to save and change.
