Berikut ini Kumpulan Menu Dropdown Menu Sederhana Menu Responsif Di Blogger
Letakkan kode CSS dibawah ini tepat di atas kode </head>
<style type="text/css">
.nav-menu{background: rgba(38,50,56,1);width:100%;}
nav {width:100%;padding:0;}nav:after {content: "";display: table;clear: both;}
nav ul {float:left;padding: 0;margin: 0;list-style: none;position: relative;}
nav ul li {margin: 0px;display: inline-block;float: left;}
nav a, nav a:hover, nav a:visited {display: block;padding: 0 20px;color: #FFF;font-size: 18px;line-height: 60px;text-decoration: none;}
nav a:hover {background-color: rgba(84,110,122,1);}nav label span{float:right;}
.toggle, [id^=drop] {display: none;}nav input[type=checkbox]{display: none;}
/*** Media Queries ***/
@media all and (max-width : 768px) {
nav {margin: 0;}.toggle + a,.menu {display: none;}
.toggle {display: block;background-color:#333;padding: 0 20px;color: #FFF;font-size: 18px;line-height: 60px;text-decoration: none;border: none;cursor:pointer;}
.toggle:hover {background-color: #000000;}[id^=drop]:checked + ul {display: block;width: 100%;}
nav ul li {display: block;width: 100%;}
</style>
Kemudian letakkan kode html struktur menunya cari kode dalam templat </header>, kemudian letakkan kode html di bawah ini tepat diatas kode </header>atau dibawahnya
<div class="nav-menu">
<nav>
<label class="toggle" for="drop">Menu <span>☰</span></label>
<input id="drop" type="checkbox">
<ul class="menu">
<li><a href="/">Home</a></li>
<li><a href="#">Nama Menu 1</a></li>
<li><a href="#">Nama Menu 2</a></li>
<li><a href="#">Nama Menu 3</a></li>
<li><a href="#">Nama Menu 4</a></li>
<li><a href="#">Nama Menu 5</a></li>
</ul>
</nav>
</div>
Silahkan di sesuaikan sendiri untuk warnanya ,edit di kode CSS kode warna contohnya #000000 ,untuk tools warna bisa di sini Color_Picker silahkan disesuaikan sendiri ,jika bingung atau belom jelas silahkan bertanya di kolom komentar