Kita
mulai dengan membuat wrapper(pembungkus) div dan kita akan memberikan classmenu-wrap.
Skrip HTML
<!doctype
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<title>JudulHalamanSaya</title>
</head>
<body>
<div
class="menu-wrap">
</div>
</body>
</html>
|
Didalam wrapper
kita masukkan daftar link yang ingin kita tampilkan, daftar link
tersebut kita bungkus dengan tag <ul> dan tag <li>:
Skrip HTML
<ul>
<li><a
href="beranda.html">Beranda</a></li>
<li><a
href="tentang.html">Tentang Kami</a></li>
<li><a
href="kontak.html">Kontak Kami</a>
<ul>
<li><a
href="alamat.html">Alamat Kami</a></li>
<li><a
href="kebijakan.html">Kebijakan</a></li>
</ul>
</li>
</ul>
|
Karena kita akan menggunakan eksternal
CSS, maka tambahkan skrip berikut dalam tag head:
Skrip HTML
|
|
<link
rel="stylesheet" type="text/css"
href="style.css" media="all" />
|
Sehingga skrip akhir kita menjadi seperti ini:
Skrip HTML
<!doctype
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<title>JudulHalamanSaya</title>
<link
rel="stylesheet" type="text/css"
href="style.css" media="all" />
</head>
<body>
<div
class="menu-wrap">
<ul>
<li><a
href="beranda.html">Beranda</a></li>
<li><a
href="tentang.html">Tentang Kami</a></li>
<li><a href="kontak.html">Kontak
Kami</a>
<ul>
<li><a
href="alamat.html">Alamat Kami</a></li>
<li><a
href="kebijakan.html">Kebijakan</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
|
sumber: http://tanyaistilahindo.blogspot.com/2012/09/drop-down.html
amikom.ac.id
Tidak ada komentar:
Posting Komentar