Cara membuat menu drop down website

Untuk membuat suatu website dinamis yang bagus yang harus ada adalah sebuah menu yang menarik
Membaut menu yang menarik salah satunya cara emembuat menu drop down website...
Belajar program web salah satunya akan dipelajari membuat menu drop down yang simple..
yang diperlukan pertama kali adalah membuat file php.. yang disini akan saya sampaikan cara belajar program php yang bersangkutan dengan menu yang akan kita buat...

Step 1 File PHP

Ini script yang akan digunakan

<link rel="stylesheet" href="css2.css">
<div id="menuku">
<ul>
<li><a href="index.php">PROFIL</a></li>
<li><a href="index.php">HOME</a></li>
<li><a href="pendaftaran.php">PENDAFTARAN</a>
<ul>
</ul>
</td>
<li><a href="strukturorganisasi.php">STRUKTUR ORGANISASI</a>
<ul>
<li><a href="index.php">PENGURUS INTI</a></li>
<li><a href="index.php">DIVISI KEROHANIAN</a></li>
<li><a href="index.php">DIVISI INTERNAL</a></li>
<li><a href="index.php">DIVISI EKSTERNAL</a></li>
<li><a href="index.php">DIVISI IPTEK</a></li>
</ul>
</td>
<li><a href="index.php">KEGIATAN BEM</a>
<ul>
<li><a href="index.php">KOMPETI</a></li>
<li><a href="index.php">MAPENA</a></li>
</ul></td>
<li><a href="lengkap.php">BERITA TERBARU</a>
<ul>
</ul>
</td>
<li><a href="bukutamu1.php">GUESBOOK</a>
<ul>
</ul></td>
</tr>
</div>

Penjelasa
<link rel="stylesheet" href="css2.css"> ini digunakan untuk memanggil file css yang akan kita buat nanti

<li><a href="strukturorganisasi.php">STRUKTUR ORGANISASI</a>
digunakan untuk menu yang akan tampil
<ul>
<li><a href="index.php">PENGURUS INTI</a></li>
<li><a href="index.php">DIVISI KEROHANIAN</a></li>
<li><a href="index.php">DIVISI INTERNAL</a></li>
<li><a href="index.php">DIVISI EKSTERNAL</a></li>
<li><a href="index.php">DIVISI IPTEK</a></li>
</ul>
dan ini digunakan untuk membuat anak menunya...
<a href="silahkan diisi dengan lokasi file dengan nama lengkap">silahkan ini di isi dengan nama menu</a>

contoh:
<a href="index.php">DIVISI IPTEK</a>


Step 2 file CSS


#menuku ul {
list-style: none;
}
#menuku li {
float: left;
}
#menuku ul ul {
visibility:hidden;
width:5px;
}

#menuku ul li:hover ul,
#menuku ul a:hover ul{
visibility:visible;
}
#menuku li a {
background-color:green;
height: 2.5em;
width:130px;
display: block;
border: 0.1em solid #dcdce9;
color: yellow;
text-decoration: none;
text-align: center;
}


penjelasan
silahkan fahami sendiri
hehehehehe
di sini


FINISH

Posted by Admine Kimcil_cantit

Tweet