Buat Menu bertingkat keren SMPIT ADA

BUAT MENU BERTINGKAT KEREN
mumpung ada waktu dan pas berhasil buat menu acak-acakan tapi hasilnya ndak mengecewakan lah lumayan bisa dilihat menu pada halaman depan smpit ada
ya kayak gitu butuh perjuangan supaya isa jadi ok
ada beberapa langkah
1. pilih pada pengaturan blog pada menu LAYOUT , tambahnya gadget HTML
2. drag gadget HTML tadi tarik kebawah menu utama
3. Copy pasti HTML berikut kedaam menu kalain
4. kemudain LINK yang ada diganti sesuai artikel yang kalina punya
5. Nama nya diganti sesuai kebutuhan
ok jadilah silahkan mencoba ya
link berkiut dibawah ini

<div id="menu">
<li><a href="http://smpitadaindonesia.blogspot.com/2016/04/smpit-ada-sekolah-menengah-pertama.html" class="drop">SMPIT ADA</a><!-- Begin Home Item -->

<div class="dropdown_2columns"><!-- Begin 2 columns container -->
<div class="col_2">
<h2></h2>

</div>
<div class="col_2">
<h2></h2>
</div>
<div class="col_1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi98XZfYENyS9X9n8upvjYYLj6tBn9Oc-UkSwO5yNe8Nlotx9H-HWlppjg-L8poOUcdOmZ_YizOvF7lN7BLg2LVwe-7POpfKkzm6fg3BobIwQhFUC6s-n8LLS_jtz1qfY1w1FmBUqI89nFO/s1600/LOGO+SMpIt+ADA.jpg" width="50" height="65" alt="" />
</div>
<div class="col_1">
<p class="black_box">YAYASAN YASMU PAYAMAN, SMPIT AL QUR'AN DAN DAKWAH ALAM, AYO MENGHAFAL AL QUR'AN</p>
</div>

</div><!-- End 2 columns container -->
</li><!-- End Home Item -->
<li><a href="http://smpitadaindonesia.blogspot.co.id/2016/04/daftar-nomor-telpone-informasi-tentang.html" class="drop">INFO </a><!-- Begin 5 columns Item -->
<div class="dropdown_5columns"><!-- Begin 5 columns container -->
<div class="col_5">
<h2></h2>
</div>
<div class="col_1">
<p class="black_box"></p>
</div>
<div class="col_1">
<p></p>
</div>
<div class="col_1">
<p class="italic"></p>
</div>
<div class="col_1">
<p></p>
</div>
<div class="col_1">
<p class="strong">.</p>
</div>
<div class="col_5">
<h2></h2>
</div>
<div class="col_2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIf01Ga0HMeupwAyrGORzj0yXfbbc5horZh8LlvENwzw6ILTLZ-9BX8iQ8CZ_50PPALGYu27LE3R1Vg9yvM8DpXPL6cp0GuldRSm1vCptxvWGKpEEPrPoMb09vIn4caWZ5VRdHxIEoLcyp/s1600/IMG_20130906_083547.jpg" width="50" height="50" class="img_left imgshadow" alt="" />
<p>...<a href="http://smpitadaindonesia.blogspot.com/2020/05/ppdb-smpit-ada.html">Read more PENDAFTARAN</a></p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhxXpRT3SJKQk_x0ydVM9sNO28-TWkp7U48gz-8HlW-Ppk81m-eQIakQ-ogyxTUXcFHiNaNy5eowFapShYk8HhTRpV0LK6F3Bc_uMGC2dSXD9weDqie6w7dsbBG6-ce_rSVRrE-mxmW9qL/s1600/IMG_20140120_074229.jpg" width="50" height="50" class="img_left imgshadow" alt="" />
<p>...<a href="http://smpitadaindonesia.blogspot.com/2016/04/visi-dan-misi-smpit-al-quran-dan-dakwah.html">Read more VISI MISI</a></p>
</div>
<div class="col_2">
<p class="black_box">SMPIT ADA di bangun dibawah bimbingan Guru Tercinta yang telah menggembleng kami untuk tetap tegak, teguh dan tabah dalam menghadapi fenomena Dunia Modern yang semakin menantang dan menjebak</p>
</div>
</div><!-- End 5 columns container -->
</li><!-- End 5 columns Item -->
<li><a href="http://smpitadaindonesia.blogspot.co.id/2016/04/smpit-ada-sekolah-menengah-pertama.html" class="drop">ADA SMPIT</a><!-- Begin 4 columns Item -->
<div class="dropdown_4columns"><!-- Begin 4 columns container -->
<div class="col_4">
<h2></h2>
</div>
<div class="col_1">
<h3></h3>
<ul>
<li><a href="http://smpitadaindonesia.blogspot.co.id/2016/04/jumat-03-januari-2014-perijinan-smpit.html">Langkah Perijinan</a></li>
<li><a href="http://smpitadaindonesia.blogspot.co.id/2016/04/link-download-smp-untuk-proposal.html">Proposal SMP</a></li>
<li><a href="http://smpitadaindonesia.blogspot.co.id/2016/04/kurikulum-smpit-kurikulum-kurikulum-nih.html">Kurikulum SMP</a></li>
<li><a href="https://drive.google.com/open?id=0B9G-85o6c9_RTkI3dS1RQzk2OWM">Form Pendaftaran</a></li>
<li><a href="https://drive.google.com/open?id=0B9G-85o6c9_RWklpWXc5Ty1Oak0">Jadwal Pelajaran</a></li>
</ul> 
</div>
<div class="col_1">
<h3></h3>
<ul>
<li><a href="http://smpitadaindonesia.blogspot.co.id/2016/04/visi-dan-misi-smpit-al-quran-dan-dakwah.html">Visi Misi SMP</a></li>
<li><a href="http://smpitadaindonesia.blogspot.co.id/2016/04/target-2016-2017-target-terbaru-pada.html">Target</a></li>
<li><a href="http://smpitadaindonesia.blogspot.co.id/2016/04/strategi-memudahkan-menghafal-al-quran.html">Strategi</a></li>
<li><a href="http://smpitadaindonesia.blogspot.co.id/2016/04/rtj-rangkaian-tiga-juz-adalah-suatu.html">RTJ</a></li>
<li><a href="https://smpitadaindonesia.blogspot.co.id/2017/10/satu-tujuan-mencari-ridlo-allah-azza.html">Satu</a></li>
</ul> 
</div>
<div class="col_1">
<h3></h3>
<ul>
<li><a href="https://smpitadaindonesia.blogspot.co.id/2017/10/ektra-kurikuler-smpit-ada-1.html">Ektra Kurikuler</a></li>
<li><a href="https://smpitadaindonesia.blogspot.co.id/2017/10/tahfidzul-quran.html">TAHFIDZUL QUR'AN</a></li>
<li><a href="https://smpitadaindonesia.blogspot.co.id/2017/10/olhraga.html">OLAHRAGA</a></li>
<li><a href="https://smpitadaindonesia.blogspot.co.id/2017/10/khuruj.html">KHURUJ</a></li>
<li><a href="http://smpitadaindonesia.blogspot.com/2020/05/smpit-ada-nasehat.html">Most Importen</a></li>
</ul> 
</div>
<div class="col_1">
<h3></h3>
<ul>
<li><a href="">Ektra kurikuler</a></li>
<li><a href="https://smpitadaindonesia.blogspot.co.id/2017/10/khuruj.html">KHURUJ</a></li>
<li><a href="">Kiamat Sikap</a></li>
<li><a href="">Ngaji bareng</a></li>
<li><a href="">Penting banget</a></li>
</ul> 
</div>
</div><!-- End 4 columns container -->
</li><!-- End 4 columns Item -->

<li class="menu_right"><a href="#" class="drop">PPDB</a>
<div class="dropdown_1column align_right">
<div class="col_1">
<ul class="simple">
<li><a href="http://smpitadaindonesia.blogspot.com/2020/05/ppdb-smpit-ada.html">Register</a></li>
<li><a href="http://smpitadaindonesia.blogspot.co.id/2016/04/konfirmasi-pendaftaran-anda-bisa.html">Payment Confirmation</a></li>
<li><a href="http://smpitadaindonesia.blogspot.co.id/2016/04/daftar-nomor-telpone-informasi-tentang.html">Contact Us2</a></li>
<li><a href="http://smpitadaindonesia.blogspot.co.id/2016/04/cara-pembayaran-mengenai-pendaftaran.html">How to Paid</a></li>
<li><a href="http://smpitadaindonesia.blogspot.co.id/2016/04/blog-post_21.html">About Us</a></li>
</ul> 
</div>
</div>
</li>

<li class="menu_right"><a href="#" class="drop">Mukjizat Al Qur'an</a>
<div class="dropdown_1column align_right">
<div class="col_1">
<ul class="simple">
<li><a href="http://smkadaindonesia.blogspot.co.id/2015/11/sujud-dalam-al-quran-terdapat-surat.html">Keajaiban Angka</a></li>
<li><a href="http://smkadaindonesia.blogspot.co.id/2015/11/langit-melindungi-bumi-planet-bumi.html">Astronomi  dan bintang</a></li>
<li><a href="http://smkadaindonesia.blogspot.co.id/2015/11/tentang-tempat-berpijak-piramida-diatas.html">Tempat kita berpijak</a></li>
<li><a href="#">Tibbun Nabawi dan kesehatan</a></li>
<li><a href="#">The Secret of Al Qur'an</a></li>
</ul> 
</div>
</div>
</li>

<li class="menu_right"><a href="#" class="drop">ِDAFTAR ARTIKEL</a><!-- Begin 3 columns Item -->
<div class="dropdown_3columns align_right"><!-- Begin 3 columns container -->
<div class="col_3">
<h2>Daftar di box</h2>
</div>
<div class="col_1">
<ul class="greybox">

<li><a href="http://smpitadaindonesia.blogspot.com/2020/05/smpit-ada-nasehat.html">Nasehat</a></li>
<li><a href="#">TIBBUN NABAWI's</a></li>
<li><a href="#">SHIROH</a></li>

<li><a href="#">FIQIH</a></li>
<li><a href="#">AKHLAK</a></li>
</ul> 
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">DAKWAH</a></li>
<li><a href="http://smpitadaindonesia.blogspot.co.id/2016/04/blog-post_21.html">MEMORIES</a></li>
<li><a href="http://smpitadaindonesia.blogspot.co.id/2016/04/blog-post_46.html">PIONER SMP</a></li>
<li><a href="#">MAJU</a></li>
<li><a href="#">MELESAT</a></li>
</ul> 
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="#">MEMBANGUN</a></li>
<li><a href="#">Ayo AYo</a></li>
<li><a href="#">Semangat Juang</a></li>
<li><a href="#">MELANGLANG</a></li>

</ul> 
</div>
<div class="col_3">
<h2>sample</h2>
</div>
<div class="col_3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAy7VjnWL4kDcAMlB1ewhDW-jTmvUd4YlxGod7rnAN9U-WTY8tsLJr64Dq4wKpndRQ6tcV9v8BS5qcovhnUOmM8ULeJo3mu1GsIhOBkttQOMoFIpCi2WcSF_299fdHuk165MSEAGPXwW91/s1600/02.jpg" width="50" height="50" class="img_left imgshadow" alt="" />
<p><a href="#">Read more</a></p>
<img src="" width="50" height="50" class="img_left imgshadow" alt="" />
<p>Tecnician smaissoftware.blogspot.com<a href="http://smaissoftware.blogspot.com/">Read more</a></p>
</div>
</div><!-- End 3 columns container -->
</li><!-- End 3 columns Item -->
</div>

<style type="text/css">
body, ul, li {
 font-size:14px;
 font-family:Arial, Helvetica, sans-serif;
 line-height:21px;
 text-align:left;
}

/* Navigation Bar */

#menu {
 list-style:none;
 width:940px;
 margin:30px auto 0px auto;
 height:43px;
 padding:0px 20px 0px 20px;

 /* Rounded Corners */

 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;

 /* Background color and gradients */

 background:  #F0FFFF;
 background: -moz-linear-gradient(top,#0272a7, #013953);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from( #2F4F4F), to( #A9A9A9));

 /* Borders */

 border: 1px solid #002232;

 -moz-box-shadow:inset 0px 0px 1px #edf9ff;
 -webkit-box-shadow:inset 0px 0px 1px #483D8B;
 box-shadow:inset 0px 0px 1px #edf9ff;
}

#menu li {
 float:left;
 text-align:center;
 position:relative;
 padding: 4px 10px 4px 10px;
 margin-right:30px;
 margin-top:7px;
 border:none;
}

#menu li:hover {
 border: 1px solid #FFEFD5;
 padding: 4px 9px 4px 9px;

 /* Background color and gradients */

 background: #FAF0E6;
 background: -moz-linear-gradient(top, #FAF0E6, #F8F8FF);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FAF0E6), to(#F8F8FF));

 /* Rounded corners */

 -moz-border-radius: 5px 5px 0px 0px;
 -webkit-border-radius: 5px 5px 0px 0px;
 border-radius: 5px 5px 0px 0px;
}

#menu li a {
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color: #F8F8FF;
 display:block;
 outline:0;
 text-decoration:none;
 text-shadow: 1px 1px 1px #000000;
}

#menu li:hover a {
 color:#161616;
 text-shadow: 1px 1px 1px #000000;
}
#menu li .drop {
 padding-right:21px;
 background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwBFsjmuBMbkGwnOSSL7WNyua071sbkb2xjbal7rBaN41NlHmMDgUp6KoPfTRq_EsPZxTl_jlf5z3YxkDKy-pSNn9CU8l32wQnRPkEJjkUsJ48IQpn25vfmVo8jUk_H9b_pX9yKa60M1HV/s1600/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
 background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwBFsjmuBMbkGwnOSSL7WNyua071sbkb2xjbal7rBaN41NlHmMDgUp6KoPfTRq_EsPZxTl_jlf5z3YxkDKy-pSNn9CU8l32wQnRPkEJjkUsJ48IQpn25vfmVo8jUk_H9b_pX9yKa60M1HV/s1600/drop.png") no-repeat right 7px;
}

/* Drop Down */

.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
 margin:4px auto;
 float:left;
 position:absolute !important;
 left:-999em; /* Hides the drop down */
 text-align:left;
 padding:10px 5px 10px 5px;
 border:1px solid #FFEFD5;
 border-top:none;

 /* Gradient background */
 background:#FAF0E6;
 background: -moz-linear-gradient(top, #F8F8FF, #BBBBBB);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333333), to(#F5F5F5));

 /* Rounded Corners */
 -moz-border-radius: 0px 5px 5px 5px;
 -webkit-border-radius: 0px 5px 5px 5px;
 border-radius: 0px 5px 5px 5px;
}

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 600px;}

#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
 left:-1px ;
z-index:444 !important;
    top:auto;
}

/* Columns */

.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
 display:inline;
 float: left;
 position: relative;
 margin-left: 5px;
 margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}

/* Right alignment */

#menu .menu_right {
 float:right !important;
 margin-right:0px;
}
#menu li .align_right {
 /* Rounded Corners */
 -moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
 left:auto;
 right:-1px;
 top:auto;
}

/* Drop Down Content Stylings */

#menu p, #menu h2, #menu h3, #menu div li {
 font-family:Arial, Helvetica, sans-serif;
 line-height:21px;
 font-size:12px;
 text-align:left;
 text-shadow: 1px 1px 1px #0000FF;
}
#menu h2 {
 font-size:21px;
 font-weight:00;
 letter-spacing:-1px;
 margin:7px 0 14px 0;
 padding-bottom:14px;
 border-bottom:1px solid #000000;
}
#menu h3 {
 font-size:14px;
 margin:7px 0 14px 0;
 padding-bottom:7px;
 border-bottom:1px solid #000000;
}
#menu p {
 line-height:18px;
 margin:0 0 10px 0;
}

#menu li:hover div a {
 font-size:12px;
 color:#F5F5F5;
}
#menu li:hover div a:hover {
 color:#F5F5F5;
}
.strong {
 font-weight:bold;
}
.italic {
 font-style:italic;
}
.imgshadow {
 background:#000000;
 padding:4px;
 border:1px solid #FFEFD5;
 margin-top:5px;
 -moz-box-shadow:0px 0px 5px #000000;
 -webkit-box-shadow:0px 0px 5px #000000;
 box-shadow:0px 0px 5px #000000;
}
.img_left { /* Image sticks to the left */
 width:auto;
 float:left;
 margin:5px 15px 5px 5px;
}
#menu li .black_box {
 background-color:#333333;
 color: #F0F8FF;
 text-shadow: 1px 1px 1px #000000;
 padding:4px 6px 4px 6px;

 /* Rounded Corners */
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;

 /* Shadow */
 -webkit-box-shadow:inset 0 0 3px #000000;
 -moz-box-shadow:inset 0 0 3px #00008B;
 box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
 list-style:none;
 padding:0