Membuat Dropdown 2 Level Unik Dengan Tag Details HTML5 Dan CSS3

Hallo teman-teman bertemu lagi pada tutorial dumet school, pada tutorial kali ini saya akan mengajarkan bagaimana cara Membuat Dropdown 2 Level Unik Dengan Tag Details HTML5 Dan CSS3,
mungkin untuk lebih jelasnya kita langsung saja praktek, teman-teman silahkan buat sebuah file dan ketikan script berikut:

<head>
<meta charset="utf-8">
<title>dropdown menu</title>

</head>

<body>
<details>
      <summary>Paket Kursus Dumet School</summary>
      <ul>
      	<li><a href="">Web Master</a></li>
        <li><a href="">Web Programming</a>
        	<details class="levelkedua">
        		<summary >Paket Kursus Dumet School</summary>
        		<ul class="sumleveldua">
        			<li><a href="">Web Master</a></li>
        			<li><a href="">Web Programming</a>
        		</ul>
        	</details>
        </li>
        <li><a href="">Digital Marketing</a></li>
        <li><a href="">Grafik Design</a></li>
        <li><a href="">Flash</a></li>
      </ul>
</details>
</body>
</html>

Script diatas adalah script html cssnya, sekarang kita atur stylenya dengan css, teman-teman silahkan tambahkan script css berikut ini,

<style>
details{ position:relative;}
summary{background:#465F9F; color:#fff; padding:10px; width:200px;}
ul{background:#B63426;width:220px; position:absolute;top:20px; padding:0; }
li{list-style:none;}
li a{color:#fff; text-decoration:none; padding:5px 10px;display:block;transition:1s ease;}
ul li a:hover{background:#EBBE8C; color:#B63426}
.levelkedua{display:none;}
details li{position: relative}
details li:hover .levelkedua{display:block;position: absolute; top:0; left:220px;}
.sumleveldua{position:relative;top:-5px}
</style>

sehingga kelengkapan scirptnya dalah seperti berikut:

<head>
<meta charset="utf-8">
<title>dropdown menu</title>
<style>
details{ position:relative;}
summary{background:#465F9F; color:#fff; padding:10px; width:200px;}
ul{background:#B63426;width:220px; position:absolute;top:20px; padding:0; }
li{list-style:none;}
li a{color:#fff; text-decoration:none; padding:5px 10px;display:block;transition:1s ease;}
ul li a:hover{background:#EBBE8C; color:#B63426}
.levelkedua{display:none;}
details li{position: relative}
details li:hover .levelkedua{display:block;position: absolute; top:0; left:220px;}
.sumleveldua{position:relative;top:-5px}
</style>
</head>

<body>
<details>
      <summary>Paket Kursus Dumet School</summary>
      <ul>
      	<li><a href="">Web Master</a></li>
        <li><a href="">Web Programming</a>
        	<details class="levelkedua">
        		<summary >Paket Kursus Dumet School</summary>
        		<ul class="sumleveldua">
        			<li><a href="">Web Master</a></li>
        			<li><a href="">Web Programming</a>
        		</ul>
        	</details>
        </li>
        <li><a href="">Digital Marketing</a></li>
        <li><a href="">Grafik Design</a></li>
        <li><a href="">Flash</a></li>
      </ul>
</details>
</body>
</html>

jika sudah teman-teman bisa save dan coba jalankan pada browser masing-masing,

gimana cukup mudah bukan, silahkan teman-teman coba dirumah,semoga tutorial kali ini bermanfaat, terimakasih.