Menu Drop Down dengan CSS
<!doctype html>
<style type="text/css">
body {
margin:0;
padding:0;
line-height: 1.5;
}
.menu-wrapper {
margin:10px auto;
position: relative;
width:700px;
}
.menu-wrapper ul{
margin:0;
padding:0;
background-color: #333;
}
ul.menu-horizontal {
width:100%;
position: relative;
}
ul.menu-horizontal li {
list-style: none;
}
/*Style menu horizontal*/
ul.menu-horizontal >li{
display: inline-block;
}
ul.menu-horizontal li a{
position: relative;
display: block;
padding:10px 20px;
text-decoration: none;
color:#eee;
}
ul.menu-horizontal li a:hover {
background-color:#4db2ec;
-webkit-transition:all 0.5s ease-in-out;
}
/*Style Tanda panah pada menu yang mempunyai sub menu*/
ul.menu-horizontal >li >a >span.arrow {
width:0;
height: 0;
border:5px solid transparent;
border-top:7px solid #eee;
position: absolute;
right: 5px;
top:17px;
z-index:
}
/*Style tanda panah pada sub menu level 1 dan level 2*/
ul.menu-horizontal li ul li span.arrow {
width:0;
height: 0;
border:5px solid transparent;
border-left:7px solid #eee;
position: absolute;
right: 5px;
top:17px;
z-index:
}
/*Menyembunyikan sub menu ketika tidak dihover*/
ul.submenu {
position: absolute;
display: none;
}
ul.submenu li {
position: relative;
}
/*untuk menciptakan efek animasi ketika dihover*/
@-webkit-keyframes mantul-vertikal {
0%{top: -300px;opacity: 0;}
50%{top: 120%;opacity: 1;}
75%{top: 80%;opacity: 1;}
100%{opacity: 1;top:100%;}
}
@keyframes mantul-vertikal {
0%{top: -300px;opacity: 0;}
50%{top: 120%;opacity: 1;}
75%{top: 80%;opacity: 1;}
100%{opacity: 1;top:100%;}
}
@-webkit-keyframes mantul-horizontal {
0%{left:300%;opacity: 0}
50%{left: 80%;opacity: 1;}
75%{left: 110%;opacity: 1;}
100%{left:100%;opacity: 1}
}
@keyframes mantul-horizontal {
0%{left:300%;opacity: 0}
50%{left: 80%;opacity: 1;}
75%{left: 110%;opacity: 1;}
100%{left:100%;opacity: 1}
}
/*Menampilkan sub menu level 1 ketika menu di hover*/
ul.menu-horizontal li:hover ul.level-1 {
min-width: 150px;
display: block;
top:100%;
-webkit-animation:mantul-vertikal 1s;
animation:mantul-vertikal 1s;
}
/*Menampilkan sub menu level 1 ketika menu di hover*/
ul.menu-horizontal li ul li:hover ul.level-2 {
min-width: 150px;
display: block;
-webkit-animation:mantul-horizontal 1s;
animation:mantul-horizontal 1s;
top:0;
left:100%;
}
</style>
<div class="menu-wrapper">
<ul class="menu-horizontal">
<li><a href="#">Materi 1<span class="arrow"></span></a>
<ul class="submenu level-1">
<li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/02/materi-bahasan-simulasi-digital.html">Materi Bahasan</a>
</li>
<li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/02/mengetik-10-jari.html">Mengetik 10 Jari</a>
</li>
<li><a href="#">Pengolah Kata<span class="arrow"></span></a>
<ul class="submenu level-2">
<li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/02/pengolah-kata.html">Pengertian, Fungsi dan Contohnya</a></li>
<li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/05/pengunaan-shortcut-pada-keyboard-dalam.html">Penggunaan Shortcut pada Keyboard</a></li>
</ul>
</li>
<li><a href="#">Pengolah Angka<span class="arrow"></span></a>
<ul class="submenu level-2">
<li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/02/pengolah-angka.html">Pengertian, Fungsi dan Contohnya</a></li>
</ul>
</li>
<li><a href="#">Komunikasi Daring<span class="arrow"></span></a>
<ul class="submenu level-2">
<li><a href="#">Pengertian, Fungsi dan Contohnya</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Materi 2<span class="arrow"></span></a>
<ul class="submenu level-1">
<li><a href="#">Kelas Maya<span class="arrow"></span></a>
<ul class="submenu level-2">
<li><a href="#">Pengertian, Fungsi dan Contohnya</a></li>
</ul>
</li>
<li><a href="#">Presentasi Video<span class="arrow"></span></a>
<ul class="submenu level-2">
<li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/02/pengertian-presentasi-video-fungsi-dan.html">Pengertian, Fungsi dan Contohnya</a></li>
</ul>
</li>
<li><a href="#">Simulasi Visual<span class="arrow"></span></a>
<ul class="submenu level-2">
<li><a href="#">Pengertian, Fungsi dan Contohnya</a></li>
</ul>
</li>
<li><a href="#">Buku Digital<span class="arrow"></span></a>
<ul class="submenu level-2">
<li><a href="#">Pengertian, Fungsi dan Contohnya</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Video Tutorial<span class="arrow"></span></a>
<ul class="submenu level-1">
<li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/05/link-video-tutorial-simulasi-digital.html">Link Video Tutorial Simulasi Digital Kelas 10</a>
</li>
<li><a href="#">Microsoft Excel<span class="arrow"></span></a>
<ul class="submenu level-2">
<li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/05/video-tutorial-excel-countifs.html">Excel-Countifs</a></li>
<li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/05/video-tutorial-excel-data-validation.html">Excel-Data Validation</a></li>
<li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/05/video-tutorial-excel-conditional.html">Excel-Conditional Formating</a></li>
<li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/05/artikel-dan-video-tutorial-excel-filter.html">Excel-Filter-Sort</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Informasi<span class="arrow"></span></a>
<ul class="submenu level-1">
<li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/05/about-me.html">About Me</a></li>
<li><a href="http://smkn1panyingkiran.sch.id">Web Sekolah</a></li>
<li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/02/paket-keahlian-di-smk-negeri-1.html">Kompetensi Keahlian</a></li>
<li><a href="#">Presentasi<span class="arrow"></span></a>
<ul class="submenu level-2">
<li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/05/presentasi-kelas-digital-edmodo.html">Presentasi Kelas Digital Intermediate</a></li>
<li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/05/presentasi-dan-tutorial-pembuatan-blog.html">Presentasi dan Tutorial Pembuatan Blog Sebagai Media Pembelajaran</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Evaluasi<span class="arrow"></span></a>
<ul class="submenu level-1">
<li><a href="https://docs.google.com/forms/d/e/1FAIpQLScx9NEMTNjqVH_p6Lxl25Evu_qrnLHSYqE4TcxW0pTecQZKMg/viewform">Pengelolaan Informasi</a></li>
</ul>
</li>
</ul>
</div>
</!doctype>
sumber :
http://smkn1panyingkiran.sch.id
<!doctype html>
<style type="text/css">
body {
margin:0;
padding:0;
line-height: 1.5;
}
.menu-wrapper {
margin:10px auto;
position: relative;
width:700px;
}
.menu-wrapper ul{
margin:0;
padding:0;
background-color: #333;
}
ul.menu-horizontal {
width:100%;
position: relative;
}
ul.menu-horizontal li {
list-style: none;
}
/*Style menu horizontal*/
ul.menu-horizontal >li{
display: inline-block;
}
ul.menu-horizontal li a{
position: relative;
display: block;
padding:10px 20px;
text-decoration: none;
color:#eee;
}
ul.menu-horizontal li a:hover {
background-color:#4db2ec;
-webkit-transition:all 0.5s ease-in-out;
}
/*Style Tanda panah pada menu yang mempunyai sub menu*/
ul.menu-horizontal >li >a >span.arrow {
width:0;
height: 0;
border:5px solid transparent;
border-top:7px solid #eee;
position: absolute;
right: 5px;
top:17px;
z-index:
}
/*Style tanda panah pada sub menu level 1 dan level 2*/
ul.menu-horizontal li ul li span.arrow {
width:0;
height: 0;
border:5px solid transparent;
border-left:7px solid #eee;
position: absolute;
right: 5px;
top:17px;
z-index:
}
/*Menyembunyikan sub menu ketika tidak dihover*/
ul.submenu {
position: absolute;
display: none;
}
ul.submenu li {
position: relative;
}
/*untuk menciptakan efek animasi ketika dihover*/
@-webkit-keyframes mantul-vertikal {
0%{top: -300px;opacity: 0;}
50%{top: 120%;opacity: 1;}
75%{top: 80%;opacity: 1;}
100%{opacity: 1;top:100%;}
}
@keyframes mantul-vertikal {
0%{top: -300px;opacity: 0;}
50%{top: 120%;opacity: 1;}
75%{top: 80%;opacity: 1;}
100%{opacity: 1;top:100%;}
}
@-webkit-keyframes mantul-horizontal {
0%{left:300%;opacity: 0}
50%{left: 80%;opacity: 1;}
75%{left: 110%;opacity: 1;}
100%{left:100%;opacity: 1}
}
@keyframes mantul-horizontal {
0%{left:300%;opacity: 0}
50%{left: 80%;opacity: 1;}
75%{left: 110%;opacity: 1;}
100%{left:100%;opacity: 1}
}
/*Menampilkan sub menu level 1 ketika menu di hover*/
ul.menu-horizontal li:hover ul.level-1 {
min-width: 150px;
display: block;
top:100%;
-webkit-animation:mantul-vertikal 1s;
animation:mantul-vertikal 1s;
}
/*Menampilkan sub menu level 1 ketika menu di hover*/
ul.menu-horizontal li ul li:hover ul.level-2 {
min-width: 150px;
display: block;
-webkit-animation:mantul-horizontal 1s;
animation:mantul-horizontal 1s;
top:0;
left:100%;
}
</style>
<div class="menu-wrapper">
<ul class="menu-horizontal">
<li><a href="#">Materi 1<span class="arrow"></span></a>
<ul class="submenu level-1">
<li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/02/materi-bahasan-simulasi-digital.html">Materi Bahasan</a>
</li>
<li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/02/mengetik-10-jari.html">Mengetik 10 Jari</a>
</li>
<li><a href="#">Pengolah Kata<span class="arrow"></span></a>
<ul class="submenu level-2">
<li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/02/pengolah-kata.html">Pengertian, Fungsi dan Contohnya</a></li>
<li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/05/pengunaan-shortcut-pada-keyboard-dalam.html">Penggunaan Shortcut pada Keyboard</a></li>
</ul>
</li>
<li><a href="#">Pengolah Angka<span class="arrow"></span></a>
<ul class="submenu level-2">
<li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/02/pengolah-angka.html">Pengertian, Fungsi dan Contohnya</a></li>
</ul>
</li>
<li><a href="#">Komunikasi Daring<span class="arrow"></span></a>
<ul class="submenu level-2">
<li><a href="#">Pengertian, Fungsi dan Contohnya</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Materi 2<span class="arrow"></span></a>
<ul class="submenu level-1">
<li><a href="#">Kelas Maya<span class="arrow"></span></a>
<ul class="submenu level-2">
<li><a href="#">Pengertian, Fungsi dan Contohnya</a></li>
</ul>
</li>
<li><a href="#">Presentasi Video<span class="arrow"></span></a>
<ul class="submenu level-2">
<li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/02/pengertian-presentasi-video-fungsi-dan.html">Pengertian, Fungsi dan Contohnya</a></li>
</ul>
</li>
<li><a href="#">Simulasi Visual<span class="arrow"></span></a>
<ul class="submenu level-2">
<li><a href="#">Pengertian, Fungsi dan Contohnya</a></li>
</ul>
</li>
<li><a href="#">Buku Digital<span class="arrow"></span></a>
<ul class="submenu level-2">
<li><a href="#">Pengertian, Fungsi dan Contohnya</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Video Tutorial<span class="arrow"></span></a>
<ul class="submenu level-1">
<li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/05/link-video-tutorial-simulasi-digital.html">Link Video Tutorial Simulasi Digital Kelas 10</a>
</li>
<li><a href="#">Microsoft Excel<span class="arrow"></span></a>
<ul class="submenu level-2">
<li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/05/video-tutorial-excel-countifs.html">Excel-Countifs</a></li>
<li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/05/video-tutorial-excel-data-validation.html">Excel-Data Validation</a></li>
<li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/05/video-tutorial-excel-conditional.html">Excel-Conditional Formating</a></li>
<li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/05/artikel-dan-video-tutorial-excel-filter.html">Excel-Filter-Sort</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Informasi<span class="arrow"></span></a>
<ul class="submenu level-1">
<li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/05/about-me.html">About Me</a></li>
<li><a href="http://smkn1panyingkiran.sch.id">Web Sekolah</a></li>
<li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/02/paket-keahlian-di-smk-negeri-1.html">Kompetensi Keahlian</a></li>
<li><a href="#">Presentasi<span class="arrow"></span></a>
<ul class="submenu level-2">
<li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/05/presentasi-kelas-digital-edmodo.html">Presentasi Kelas Digital Intermediate</a></li>
<li><a href="http://simulasidigital-muchamadekisa.blogspot.co.id/2017/05/presentasi-dan-tutorial-pembuatan-blog.html">Presentasi dan Tutorial Pembuatan Blog Sebagai Media Pembelajaran</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Evaluasi<span class="arrow"></span></a>
<ul class="submenu level-1">
<li><a href="https://docs.google.com/forms/d/e/1FAIpQLScx9NEMTNjqVH_p6Lxl25Evu_qrnLHSYqE4TcxW0pTecQZKMg/viewform">Pengelolaan Informasi</a></li>
</ul>
</li>
</ul>
</div>
</!doctype>
sumber :
http://smkn1panyingkiran.sch.id
