Cara membuat menu dropdown diatas Header

بِسْــــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

 Assalamualaikum Wr.wb

Saya mau update tutorial terbaru nih :) , namannya aja sudah tidak asing lagi dipikiran anda yaitu Cara membuat Menu Dropdown diatas Header , aslinya sih saya tidak mau upload ini tutor berhubung gak ada artikel lain yang saya upload hehe jadi ini yang saya keluarkan , dari pada disekolah juga nganggur jamkos alias gurunya lagi sibuk urusan Ujian Nasional , so saya bwt waktu ini sebaik-baik mungkin untuk pekerjaan lain-nya . langsung aja deh , oiya Demo-nya kayak gini sob :

Untuk demo yang lebih jelas silahkan klik dibawah ini :

langsung aja carannya lakukanlah langkah demi langkah ya sob monggo :

Pertama & Terakhir : 
Langkah-langkahnya sebagai berikut :
1. Login ke akun Blogger sobat.
2.  Pergi ke Blogger Dashboard → Tata Letak → klik "Add a gadget" .
3.  Pilih "Html/JavaScript" lalu Letakkan Kode dibawah ini :

<style type="text/css">
#msuteja ul li a {position: relative;float: bottom;display: block;width:
 AUTO;height: 15px;padding: 5px 0 0 0;margin-right: 5px;text-align: 
center;font-size: 15px;text-decoration: 
none;color:transparant;font-weight: bold;outline: none;}#msuteja li 
.current{color: transparant;}#msuteja li a:hover, #msuteja li a:active 
{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq9hdwQQpAy_Z7xBVFK4qdsbw2zqdd5_lxUYjpza2w2cAq18xa3RWNc68hpOw6_FSRH5fqRLcPRvm_v9Zw6cgpxTsOJdtU6L3bAkyFhzeFT6rk2dbHGfD7YfwswUsRpw0n2jezSJhMYMQS/s1600/background-judul-posting.gif);background:
 -webkit-gradient(linear, left top, left bottom, from(#4B0082), 
to(#FF0000)); background: -moz-linear-gradient(top,#4B0082, #FF0000); 
filter: 
progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', 
endColorstr='#FF0000'); -ms-filter: 
progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', 
endColorstr='#FF0000'); display: inline-block;zoom: 1; *display: 
inline;border: dotted 1px #555555;padding: 3px 
5px;-webkit-border-radius: 20px; -moz-border-radius: 20px; 
border-radius: 20px; -webkit-box-shadow: 0 1px 0px rgba(1,0,0,.1); 
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); box-shadow: 0 1px 0px 
rgba(0,0,0,.1); -webkit-transition:all 0.5s ease-in-out; 
-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s 
ease-in-out;transition:all 0.5s ease-in-out; 
-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);}color:
 #ffffff;margin: 0;font-size:18px;padding: 9px 15px 8px;text-decoration:
 none;}#msuteja {width: auto;float: left;margin: 0;padding: 0;}#msuteja 
{margin: 0;padding: 0;}#msuteja ul {float: left;list-style: none;margin:
 0;padding: 0;}#msuteja li {list-style: none;margin: 0;padding: 
0;}#msuteja li a, #msuteja li a:link, #msuteja li a:visited {color: 
#ffffff;display: block;text-transform: capitalize;margin: 0;padding: 9px
 15px 8px;font: Bold 15px Georgia, Arial;}#msuteja li a:hover, #msuteja 
li a:active {background:transparant;color: #ffffff;margin: 
0;font-size:20px;padding: 9px 15px 8px;text-decoration: none;}#msuteja 
li li a, #msuteja li li a:link, #msuteja li li a:visited {background: 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq9hdwQQpAy_Z7xBVFK4qdsbw2zqdd5_lxUYjpza2w2cAq18xa3RWNc68hpOw6_FSRH5fqRLcPRvm_v9Zw6cgpxTsOJdtU6L3bAkyFhzeFT6rk2dbHGfD7YfwswUsRpw0n2jezSJhMYMQS/s1600/background-judul-posting.gif);background:
 -webkit-gradient(linear, left top, left bottom, from(#00FFFF), 
to(#000000)); background: -moz-linear-gradient(top,#00FFFF, #000000); 
filter: 
progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', 
endColorstr='#000000'); -ms-filter: 
progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', 
endColorstr='#000000'); width: 250px;color: 
#E6E6FA;-webkit-border-radius: 30px; -moz-border-radius: 30px; 
border-radius: 30px; border-style: outset;-webkit-transition:all 0.5s 
ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s
 ease-in-out;transition:all 0.5s ease-in-out; 
-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);float:
 none;margin: 0;padding: 7px 10px;border-bottom: 
transparant;border-left: transparant;border-right: transparant;font: 
bold 14px kristen itc, Arial;}#msuteja li li a:hover, #msuteja li li 
a:active {background: #FF0000;background: -webkit-gradient(linear, left 
top, left bottom, from(#FF0000), to(#00FF00)); background: 
-moz-linear-gradient(top,#FF0000, #00FF00); filter: 
progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', 
endColorstr='#00FF00'); -ms-filter: 
progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', 
endColorstr='#00FF00'); color: 
#ffffff;font-size:20px;font-family:kristen itc;text-align: 
center;padding: 7px 10px;}#msuteja li {float: left;padding: 0;}#msuteja 
li ul {z-index: 9999;position: absolute;left: -999em;height: 20px;width:
 170px;margin: 0;padding: 0;}#msuteja li ul a {width: 140px;}#msuteja li
 ul ul {margin: -32px 0 0 171px;}#msuteja li:hover ul ul, #msuteja 
li:hover ul ul ul, #msuteja li.sfhover ul ul, #msuteja li.sfhover ul ul 
ul {left: -999em;}#msuteja li:hover ul, #msuteja li li:hover ul, 
#msuteja li li li:hover ul, #msuteja li.sfhover ul, #msuteja li 
li.sfhover ul, #msuteja li li li.sfhover ul {left: auto;}#msuteja 
li:hover, #msuteja li.sfhover {position: static;}#footer-column-divide 
{clear:both;}#msuteja{font-family:Comic Sans Ms;background:#000 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL7VClq1Pan3o0wTvyAmboiyhp-jPSJhlRAFKmXlXVvUwxdqXVaJ_IsELxy4HBT0K2udHMFiUy-BjpJDDV9oGKE7TXCrgP8YLmw0Z41UXzSwkgWsPNuJJnTN3f9MYTFpli2IcJSoEkFeEz/)repeat-x;(0,0,0,
 0.80);border:1px solid #C0C0C0;padding:2px 
0;z-index:999;top:0px;left:1px;right:1px;position:fixed;-moz-border-radius:10px;-webkit-border-radius:10px;}
</style>
<div id='msuteja'>
<ul id='msuteja'>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a>
<ul class='children'>
<li><a href='#' target='_blank'>Menu 2.1</a></li>
<li><a href= '#'target='_blank'>Menu 2.2</a></li>
</ul>
</li>
<li><a href='#' target='_blank'>Menu 3</a>
<ul class='children'>
<li><a href='#' target='_blank'>Menu 3.1</a></li>
<li><a href='#' target='_blank'>Menu 3.2</a></li>
</ul>
</li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'' target='_blank'><blink>Menu 5</blink></a></li>
<li><a href='#' target='_blank'><blink>Menu 6</blink></a></li>
<li><a href='#' target='_blank'><blink>Menu 7</blink></a></li>
</ul>
</div>  

✎Keterengan :
 URL & Tanda # itu sebagai link → letakkan link yang anda inginkan
 Teks Menu++ itu sebagai nama (judul) → ganti dengan judul yang anda inginkan 

Lalu save dan lihat hasilnya apakah sudah jadi?? atau belum?? kalau belum segera Hubungi saya / komen dibawah sekian deh , semoga bermanfaat untuk anda yang sudah visit ini posting.

Wassalamualaikum Wr.wb