Dalam tutorial ini admin akan membuat hanya dalam satu file saja karena kodenya tidak terlalu banyak. Kita mulai saja, pertama buat folder ( terserah mau dimana saja yang penting bisa diakses )
Untuk membuatnya pastinya harus mempunyai Text Editor ( Notepad, Sublime Text ) dan Web Browser ( Firefox, Google Chrome )
Kedua buat file dengan nama index.html dan masukan kode berikut
<html>
<head>
<title>DropDown Menu dengan CSS</title>
<style type="text/css">
/*style menu dan untuk menghilangkan list style*/
#menu ul{
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
font-weight: bold;
}
/*membuat menu menjadi horizontal dengan display block*/
#menu ul li{
display: block;
position: relative;
float: left;
}
/*Untuk menyembunyikan ul li(sub menu)*/
#menu li ul{display: none;}
/*style awal sebelum cursor mouse diarahkan(menu utama)*/
#menu ul li a{
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px 15px 5px 15px;
background: #000;
/*margin left:1px;*/
white-space: nowrap;
}
/*style setelah cursor diarahkan*/
#menu ul li a:hover{background:orange;}
/*untuk memunculkan sub menu jika pada sebuah menu utama pada tag il ul(maksudnya ada tag ul dalam tag li)*/
#menu li:hover ul{
display: block;
position: absolute;
}
/*meratakan sub menu kanan kiri dan menghilangkan fungsi float left(mengembalikan k default)*/
#menu li:hover li{
float: none;
font-size: 11px;
}
/*style awal sebelum cursor mouse diarahkan(sub menu)*/
#menu li:hover a{background: orange;}
/*style setelah cursor diarahkan*/
#menu li:hover li a:hover{background: #666;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorial</a>
<ul>
<li><a href="#">HTML / CSS</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Wordpress</a></li>
<li><a href="#">Blogspot</a></li>
</ul>
</li>
<li><a href="#">Tentang</a>
<ul>
<li><a href="#">Tentang Saya</a></li>
<li><a href="#">Tentang Kami (kami)</a></li>
</ul>
</li>
<li><a href="#">Kontak</a></li>
</ul>
</div>
</body>
</html>
Setelah memasukan kode, untuk melihat hasilnay hanya double click pada file, jika menggunakan Firefox akan langsung terlihat hasilnya
0 Komentar