Membuat Horizontal Menu Dropdown

kali ini saya akan memposting horizontal menu versi Technology Tower karena  tadi ada sobat blogger saya yang bertanya di fb bagaimana cara membuat horizontal menu dropdown, contohnya bisa kalian lihat sendiri di blog ini. Atau kamu bisa melihat gambar ini: 

langsung aja sob:

1. Masuk ke Rancangan Blogger>Edit HTML>Expand Template Widget

2. Cari kode  lalu pastekan kode dibawah ini sesudah kode 

#menu-wrapper{color:#fff;width:100%;height:40px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp9pOyld2eJeIAP46oQP2rn8k4UR9kvandC6cECE5q3kmIUAbV_vzvEncn8CNHIwW09SYP1RgOxwtbmH2KsLRQf8JM4JtPvmqRU_JYl4xlX5Rnr6oCsidTzuKb82Z5XLP8l3kT9OL7Q_I/s1600/bgnav.png) repeat-x #1e1e1e;border-bottom:2px solid #007acc;border-top:1px solid #191919;box-shadow:0 0 8px #007acc;position:relative}
#menu{color:#fff;width:900px;height:40px;font-family:'Agency FB';font-size:16px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin:0 auto}
#menu ul{width:100%;height:auto;list-style:none;margin:0;padding:0}
#menu ul li{float:left;position:relative;width:110px;margin:0}
#menu ul li ul{position:relative;z-index:111;display:none}
#menu ul li ul li{width:100%;background:#0e0e0e}
#menu ul li a,.menu ul li a:visited{display:block;text-decoration:none;width:100%;height:40px;text-align:center;line-height:40px;overflow:hidden;color:#007acc}
#menu ul li:hover ul{display:block;position:absolute;top:40px;left:0;width:100%;border-bottom:1px solid #0a0a0a;border-right:1px solid #0a0a0a;border-left:1px solid #0a0a0a;border-bottom-left-radius:5px;border-bottom-right-radius:5px;margin-left:-1px;box-shadow:0 8px 6px -6px #000}
#menu ul li:hover ul li ul{display:none}
#menu ul li:hover ul li a{display:block;color:#999;-webkit-transition:text-shadow .2s linear;-moz-transition:text-shadow .2s linear;-o-transition:text-shadow .2s linear;transition:text-shadow .2s linear}
.anditechno{background:transparent;-webkit-transition:all .2s linear;-moz-transition:all .2s linear;-o-transition:all .2s linear;transition:all .2s linear}
.anditechno:hover{color:#fff;background:#000}

3. cari kode  lalu pastekan kode dibawah ini sesudah kode 

•  Home
  

Techno Zone

• Berita Teknologi

Gadget

Software

Mobile

Unik + Aneh

Social Media

• Social Media Article

Facebook

Tips and Trick

Artikel

keterangan:
- kamu bisa mengganti kode berwarna hijau dan biru dengan url dan nama menu sesuai menu yang mau kamu masukkan
- kode berwarna biru adalah kode menu dropdown (menu yang dibawahnya akan keluar menu lain ketika disorot mouse)

4. oke, klik simpan template dan lihat hasilnya

selamat berkreasi :)