September 2017 ~ Mapel Kerja Proyek RPL, Muchamad Eki S.A.

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</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</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</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</a>
<ul class="submenu level-2">
<li><a href="#">Pengertian, Fungsi dan Contohnya</a></li>
</ul>
</li>

</ul>
</li>

<li><a href="#">Materi 2</a>
<ul class="submenu level-1">

<li><a href="#">Kelas Maya</a>
<ul class="submenu level-2">
<li><a href="#">Pengertian, Fungsi dan Contohnya</a></li>
</ul>
</li>

<li><a href="#">Presentasi Video</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</a>
<ul class="submenu level-2">
<li><a href="#">Pengertian, Fungsi dan Contohnya</a></li>
</ul>
</li>

<li><a href="#">Buku Digital</a>
<ul class="submenu level-2">
<li><a href="#">Pengertian, Fungsi dan Contohnya</a></li>
</ul>
</li>

</ul>
</li>

<li><a href="#">Video Tutorial</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</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</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</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</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

Mapel Kerja Proyek RPL, Muchamad Eki S.A.

Basic Search (Terjemahan)

Macam-macam Teknik Pengolahan Database

Mengenal Cascading Style Sheet (CSS)

Menu Drop Down dengan CSS

Materi Pembelajaran Kerja Proyek

Primary Key dalam Database

Relationship dalam Database

Database

Blog Materi Pembelajaran Kerja Proyek

Kompetensi Keahlian di SMK Negeri 1 Panyingkiran

Mengaktifkan XAMPP

Definisi Kelompok

Postingan Populer

Label

Arsip Blog

Arsip Blog

Formulir Kontak

Aplikasi Bel Sekolah

Presentasi Implementasi Kelas Digital Edmodo

Total Kunjungan

About Me

Recent Posts

Tutorial Web Online HTML, CSS Editor

Tutorial Penggunaan Editor Blogger

Video Profil Sekolah