Membuat menu reponsive atau horizontal responsive menjadi sebuah trend tersendiri di kalangan blogger saat ini. Update untuk menunjang kinerja blog itu sangat penting,termasuk style blog itu sendiri.Membuat sebuah blog mampu menyesuaikan tampil di semua browser baik mobile maupun desktop atau sering kita sebut responsive desain tidaklah mudah.Kita harus merancang template tersebut dari header,menu,posting,sidebar dan masih banyak lagi agar mampu menyesuaikan diri dengan lingkungannya atau pas waktu SD sering kita dengar istilah Beradaptasi...wkwkwk.
Membuat Responsive Drop Down Menu di Blogger/Blogspot

/*-----Responsive Drop Down Menu oleh IBS ( idblogsite ) ----*/
body {
margin: 0px;
}
#menu{
background: #393939 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgndx4ZU-rpQ0TjS3uAv0zLzwyCAxzHUA3L1vJGDcX2loK8j2400BLYMNn3WKAkAsOQS_RQ2TUi2dbxMmBug7m7f2Q6Rbc-vreCD9vDbFOzdBwLxuEJ7zXI02cR4x3mj1Phh_qR4SjJuCQz/s1600/back_ibs.png) repeat-x;
color: #FFF;
height: 40px;
border-bottom: 2px solid #DDD;
box-shadow: 1px 2px 9px #B1B1B1;
border-top: 2px solid #DDD;
}
#menu ul,#menu li{
margin:0 auto;
padding:0 0;
list-style:none;
}
#menu ul{
height:45px;
width:1024px;
}
#menu li{
border-right:1px solid #FFF;
float:left;
display:inline;
position:relative;
font:bold 0.9em Arial;
text-transform: uppercase;
}
#menu a{display: block;
line-height: 40px;
padding: 0 14px;
text-decoration: none;
color: #FFF;
}
#menu li a:hover{
color: #fff;
background: #696969;
}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:16px;position:absolute;left:35px}
#menu ul.menus{
height: auto;
overflow: hidden;
width: 170px;
background: #696969;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.menus li{
display: block;
width: 100%;
font:normal 0.9em Arial;
text-transform: none;
border-bottom: 1px solid #7B7B7B;
border-top: 1px solid #595959;
}
#menu ul.menus a{
color: #FFF;
line-height: 35px;
}
#menu li:hover ul.menus{display:block}
#menu ul.menus a:hover{
background: #393939;
color: #FFF;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
@media screen and (max-width: 800px){
#menu{position:relative}
#menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
#menu ul.menus{width:100%;position:static;padding-left:20px}
#menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{color:white}
#menu input:checked ~ ul{display:block}
}
- Untuk edit warna background silahkan ganti kode #393939
- Untuk menyesuaikan lebar menu silahkan edit width:1024px
<nav id='menu'>
<input type='checkbox'/>
<label>≡<span>IDBLOGSITE</span></label>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>Menu A<font size='1'>▼</font></a>
<ul class='menus'>
<li><a href='#'>menu 1</a></li>
<li><a href='#'>menu 2</a></li>
<li><a href='#'>menu 3</a></li>
<li><a href='#'>menu 4</a></li>
<li><a href='#'>menu 5</a></li>
<li><a href='#'>menu 6</a></li>
</ul>
</li>
<li><a href='#'>Menu B<font size='1'>▼</font></a>
<ul class='menus'>
<li><a href='#'>menu 1</a></li>
<li><a href='#'>menu 2</a></li>
<li><a href='#'>menu 3</a></li>
<li><a href='#'>menu 4</a></li>
<li><a href='#'>menu 5</a></li>
<li><a href='#'>menu 6</a></li>
</ul>
</li>
<li><a href='#'>Menu C<font size='1'>▼</font></a>
<ul class='menus'>
<li><a href='#'>menu 1</a></li>
<li><a href='#'>menu 2</a></li>
<li><a href='#'>menu 3</a></li>
<li><a href='#'>menu 4</a></li>
<li><a href='#'>menu 5</a></li>
<li><a href='#'>menu 6</a></li>
</ul>
</li>
<li><a href='#'>Create Responsive Menu</a></li>
</ul>
</nav>
5. Simpan template dan lihat hasilnya.