Menu responsive CSS murni di blogger

Kemudian tambahkan juga kode CSS responsive di bawah ini dan simpan di atas kode ]]></b:skin> atau </style>. Jika di blog Anda sudah ada CSS responsivenya silahkan tambahkan saja pada CSS responsive yang sudah ada.

#menu{background: #50B7DC;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{float:left;display:inline;position:relative;font:bold 0.9em Arial;text-shadow: 1px 2px 4px #838383;}

#menu a{display: block;line-height: 40px;padding: 0 14px;text-decoration: none;color: #FFF;}

#menu li a:hover{color: #E4E4E4;-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;

background: #5FC6EB;}

#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: #50B7DC;position: absolute;z-index: 99;display: none;}

#menu ul.menus li{display: block;width: 100%;font:normal 0.8em Arial;text-transform: none;

text-shadow: none;border-bottom: 1px dashed #31AFDB;}


#menu ul.menus a{color: #FFF;line-height: 35px;}

#menu li:hover ul.menus{display:block}

#menu ul.menus a:hover{background: #5FC6EB;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}

}

Terakhir kode HTML nya copy kan tepat diatas  </header> 

<nav id='menu'>

<input type='checkbox'/>

<label>&#8801;<span>Navigasi&#160;Menu</span></label>

<ul>

<li><a href='/'>Home</a></li>

<li><a href='#'>About</a></li>

<li><a href='#'>Drop Down <font size='1'>&#9660;</font></a>

<ul class='menus'>

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

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

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

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

<li><a href='#'>Tab 5</a></li>

<li><a href='#'>Tab 6</a></li>

</ul>

</li>

<li><a href='#'>Contact</a></li>

<li><a href='#'>Drop Down <font size='1'>&#9660;</font></a>

<ul class='menus'>

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

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

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

</ul>

</li>

<li><a href='#'>Advertise</a></li>

</ul

Silahkan ganti tanda "/" atau "#" dengan url tujuan menu. 

contoh dengan kategori tertentu

<li><a href='#'>Tips dan Trik <font size='1'>&#9660;</font></a>

 <ul class='menus'>

   <li><a href='http://www.1kilovolt.blogspot.co.id//search/label/windows'>Windows</a></li>

   <li><a href='http://www.1kilovolt.blogspot.co.id//search/label/blogger'>Blog</a></li>

   <li><a href='http://www.1kilovolt.blogspot.co.id//search/label/Mikrotik'>Mikrotik</a></li>

 </ul>

</li>

Dan untuk warna menunya silahkan sesuaikan dengan tema blog Anda dengan memodifikasi warnanya pada kode CSS-nya.

Selamat mencoba....