Assalamualaikum wr.wb
Selamat pagi teman2 ,semoga di hari ini semua teman2 dalam limpahan rahmat dari yang maha
kuasa.
Baik lah pada kesempatan kali ini saya akan membahas tentang
program html yaitu tentang penulisan
dropdown langsung aja ke program nya.
<HTML><!--ini adalah bagian deklarasi html-->
<HEAD><!--ini adalah bagian kepala-->
<TITLE>latihan menu</TITLE><!--ini akan
menampikan pada bagian judul di mesin browser-->
<link rel=”stylesheet”
type=”text/css” href=”menu.css”>
<!--ini adalah link untuk css -->
</HEAD> <!-- ini penutup untuk bagian kepala-->
<div class=”dropdown”><!--ini adalah class
dropdownnya-->
<button class=”mainmenubtn”>Main Menu</button><!--ini
adalah menu yang akan di tampilkan-->
<divclass=”dropdown-child”>
<a href=” ”>link satu</a><!--ini adalah link
satu-->
<a href=” ”>link dua</a><!-- link 2-->
<a href=” ”>link tiga</a>
<a href=” ”>link empat</a>
<a href=” ”>link lima</a>
</div>
</div>
</HTML>
Setelah selesai simpan dengan nama terserah tapi di tutup
dengan .html
Kemudian buat lagi program
kedua.
.mainmenubtn {
background-color:
red;
color: white;
border: none;
cursor: pointer;
padding:20px;
margin-top:20px;
}
.mainmenubtn:hover {
background-color:
pink;
}
.dropdown {
position:
relative;
display:
inline-block;
}
.dropdown-child {
display: none;
background-color:
blue;
min-width: 200px;
}
.dropdown-child a {
color: black;
padding: 20px;
text-decoration:
none;
display: block;
}
.dropdown:hover .dropdown-child {
display: block;
}
Simpan sengan nama sesuai alamat link yang anda buat dan di
tutup dengan .css
Kemudian bukak lah program mu di browser.
Sekian lah program kali ini saya ucapkan terima kasih
