1. buat file dengan nama bebas,
misalnya menu.html
<html>
<head>
<title>
</title>
</head>
<body>
<div id="menu">
<ul>
<li><a
href="#">Home</a></li>
<li><a
href="#">Profile</a></li>
<li><a
href="#">Agenda</a></li>
<li><a
href="#">Produk</a>
<ul>
<li><a
href="#">Mainan</a></li>
<li><a
href="#">Kue</a></li>
<li><a
href="#">Toples</a></li>
<li><a
href="#">Alat-Alat Tulis</a></li>
</ul>
</li>
<li><a
href="#">Galery</a></li>
<li><a
href="#">Download</a></li>
</ul>
</div>
</body>
</html>
2. Selanjutnya buat file css-nya
dengan nama terserah. Misalnya menudropdown.css
/*menu horizontal*/
#menu{
position : relative;
width : 100%;
height : 40px;
background : #6699cc;
border : 1px solid #000000;
}
#menu ul{
padding : 0;
margin : 0;
list-style : none;
}
#menu ul li{
float : left;
position: relative;
}
#menu ul li a{
float : left;
color : #FFFFFF;
padding : 10px;
border-right:1px solid #000000;
text-decoration : none;
display : block;
}
#menu ul li a:hover{
background-color : #000000;
}
/*menu dropdown*/
#menu ul li ul {
display : none;
}
#menu ul li:hover ul{
display : block;
position : absolute;
top : 41px;
left : 0;
}
#menu ul li:hover ul li a{
display : block;
background : #6699cc;
color : #ffffff;
width : 130px;
border-left: 1px solid #000000;
}
#menu ul li:hover ul li a:hover{
background : #000000;
color : #ffffff;
}
Kemudian terapkan nama file
menudropdown.css dengan menambahkan skrip diantara bagian tag
<head>...</head> di file menu.html
jadinya seperti ini
<html>
<head>
<link
href="menudropdown.css" rel="stylesheet"
type="text/css">
<title>
</title>
</head>
<body>
..........//kode program di bagian
body
</body>
</html>
Kalau sudah berhasil, maka berikut adalah tampilannya:
Selamat mencoba :)
