Membuat menu dropdown

Jumat, 02 Maret 2012

Sobat ingin membuat menu dropdown di web / blog? aku punya pengantar buat anda semua, selanjutnya terserah sobat sekalian....

Menyiapkan editor HTML / PHP seperti dreamweaver dan sebangsanya sesuai selera sobat...
Buat CSS file, disini kita berinama dengan gaya.css dengan kode seperti berikut:

ul{
margin: 0;
padding: 0;
list-style: none;
}
ul li{
position: relative;
float: left;
width: 120px;
}
li ul{
position: absolute;
top: 30px;
display: none;
}
ul li a{
display: block;
text-decoration: none;
line-height: 20px;
color: #FFFFFF;
padding: 5px;
background: #000000;
margin: 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
ul li a:hover{
background: #b5001f;
}
li:hover ul, li.hover ul{
display: block;
}
Setelah gaya.css jadi sobat harus memanggil gaya.css dengan perintah sebagai berikut:
Setalah itu menyisipkan gaya.css ke kode HTML, seperti berikut diatas kode </head>:

<link rel="stylesheet" type="text/css" href="gaya.css"/>
Lalu membuat rancangan menu dengan kode berikut tepat di letakkan setelah tag <body>:

<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Submenu 2A</a></li>
<li><a href="#">Submenu 2B</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Submenu 3A</a></li>
<li><a href="#">Submenu 3B</a></li>
<li><a href="#">Submenu 3C</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a>
<ul>
<li><a href="#">Submenu 4A</a></li>
<li><a href="#">Submenu 4B</a></li>
<li><a href="#">Submenu 4C</a></li>
<li><a href="#">Submenu 4D</a></li>
</ul>
</li>
</ul>
Simpan dan lihat hasilnya akan seperti ini..