Create a Responsive Drop down Menu in Blogger

To Designing a responsive blogger template starts with the Header and the most important part of Header is the top navigation menu that provides useful links to your inner pages. Responsive drop down menus are viral now and can be seen widely implemented on all blog.

<div id='nav'>

<div id='nav-menu' role='navigation'>

<a href='#nav-menu' title='Show navigation'>

&#9776; Menu

</a>

<a href='#' title='Hide navigation'>

&#9776; Menu

</a>

<ul>

<li>

<a href='/'>HOME</a>

</li>

<li class=''><a aria-haspopup='true' href='#'>Menu 1</a>

<ul>

<li><a href='#'>SubMenu 1</a></li>

<li><a href='#'>SubMenu 1.1</a></li>

</ul>

</li>

<li class='submenu'><a aria-haspopup='true' href='#'>Menu 2</a>

<ul>

<li><a href='#'>SubMenu 2</a></li>

<li><a href='#'>SubMenu 2.2</a></li>

<li><a href='#'>Submenu 2.3</a></li>

</ul>

</li>

<li class='submenu'><a aria-haspopup='true' href='#'>Menu 3</a>

<ul>

<li><a href='#'>Submenu 3</a></li>

</ul>

</li>

<li><a href='#'>Menu 4</a></li>

</ul>

</div>

</div>

</div> 

#nav {max-width:1000px;min-height:30px;margin:0 auto;padding:0;}

#nav-menu li.submenu {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYl1cj9Q9zKBbQgO2BvcKSvPQYq6sZDxiZlhuiA8bvsvLLv6DcO8_KgDvtumdpoRkSJLpRxyzfReDdjyfvEHPG_ek5ihNH3S7QL6xoQFu5PR9lgHT8S6xEdrhMaAw1wIEegN-QubMrNaug/s1600/bo_arrow_dropdown.gif);background-repeat: no-repeat;background-position: 95% 50%;}

#nav-menu{max-width:1000px;text-transform:uppercase;}

#nav-menu > a{display: none;}

#nav-menu li{list-style-type: none;position: relative;}

#nav-menu li a{display: block;color: #4285f4;text-decoration:none;}

#nav-menu li a:active{background-color: #c00 !important;}

#nav-menu span:after{height: 0;width: 0;border: 0.313em solid transparent;border-bottom: none;border-top-color: #efa585;content: '';display: inline-block;vertical-align: middle;position: relative;right: -0.313em;}

#nav-menu > ul{background-color: #fff;height: 3.75em;margin:0;padding:0;}

#nav-menu > ul > li{width: 15%;height: 100%;float: left;}

#nav-menu > ul > li > a{font-family:'Oswald', sans-serif;height: 100%;text-align: center;font-size: 1.0em;line-height: 3.7em;-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;transition: all 0.3s ease-in;}

#nav-menu > ul > li:not( :last-child ) > a{border-right: 1px solid #f4f4f4;}

#nav-menu > ul > li:hover > a,#nav-menu > ul:not( :hover ) > li.active > a{color: #333;}

#nav-menu li ul{background-color: #f9f9f9;position: absolute;display: none;top: 100%;margin:0;padding:0;}

#nav-menu li:hover ul{display: block;left: 0;right: 0;}

#nav-menu li:not( :first-child ):hover ul{//left: -1px;}

#nav-menu li ul a{font-family:'Oswald', sans-serif;font-size: 1.0em;border-top: 1px solid #f4f4f4;padding: 1.0em;-webkit-transition: all 0.3s ease-in;

-moz-transition: all 0.3s ease-in;

-o-transition: all 0.3s ease-in;

transition: all 0.3s ease-in;}

#nav-menu li ul li a:hover,#nav-menu li ul:not( :hover ) li.active a{background-color: #333;}

@media only screen and ( max-width: 60em ) {

#nav-menu{font-size: 75%;position: relative;top: auto;left: auto;}

#nav-menu > a{font-size: 1.25em;text-decoration: none;color: #fff;background: #3d5c99;text-align: center;padding: 15px 0;display: none;text-align:center;overflow:hidden;}

#nav-menu > a:after{top: 60%;}

#nav-menu:not( :target ) > a:first-of-type,#nav-menu:target > a:last-of-type{display: block;}

#nav-menu > ul{height: auto;display: none;position: absolute;left: 0;right: 0;}

#nav-menu:target > ul{display: block;}

#nav-menu > ul > li{width: 100%;float: none;}

#nav-menu > ul > li > a{height: auto;text-align: left;padding: 0 0.833em;}

#nav-menu > ul > li:not( :last-child ) > a{border-right: none;border-bottom: 1px solid #f4f4f4;}

#nav-menu li ul{position: static;padding: 1.25em;padding-top: 0;}

#nav-menu li ul{background-color: #f8f8f8;}

#nav-menu > ul{background-color: #f8f8f8;}

#nav-menu li ul a{border-top: 1px solid #f1f1f1;}

#nav-menu > ul > li > a{border-top: 1px solid #f1f1f1;}

}