Baiklah, berikut ini adalah file style.css nya :
Buka notepad anda, tulis atau copy paste code di bawah, lalu save as style.css.
/* CSS Document */
#menu { position: relative;
width: 100%;
height: 40px;
background: #6699cc;
border: 1px solid #000000;
}
#menu ul{ margin: 0;
padding: 0;
list-style: none;
}
#menu ul li{ position: relative;
float: left;
}
#menu ul li a{ display: block;
text-decoration: none;
color: #ffffff;
padding: 10px;
float: left;
border-right: 1px solid #000000;
}
#menu ul li a:hover{ background-color: #000000; }
#menu ul li ul { display: none;}
#menu ul li:hover ul { display: block;
position: absolute;
top: 41px;
left: 0px;
}
#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;
}
Lalu file dropdown.html nya adalah :
Buka notepad kembali, tulis atau copy paste code di bawah, lalu save as dropdown.html.
<html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dropdown menu</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Portfolio</a>
<ul>
<li><a href="">Web Design</a></li>
<li><a href="">Web Programming</a></li>
</ul>
</li>
<li><a href="">Contact</a>
<ul>
<li><a href="http://www.bum1.info">bumi.info</a></li>
<li><a href="http://www.prodesign.web.id">Prodesign</a></li>
</ul>
</li>
<li><a href="">Post Feed</a>
<ul>
<li><a href="">Via Web</a></li>
<li><a href="">Via Phone</a></li>
<li><a href="">Via Rss</a></li>
</ul>
</li>
</ul>
</body>
</html>
Simpan kedua file dalam folder yang sama. Setelah selesai coba ditest dengan membuka file dropdown.html dengan browser kesayangan anda. Bila berhasil maka akan terlihat seperti gambar di bawah ini :
Semoga bermanfaat.
5 komentar:
Lagi getol-getolnya belajar CSS nih mas bro.. artikelnya sangat bermanfaat buat ane..
siipp... mas brow...
ni maksudnya apaan sih???
Gmana bukanya di web browser?????
Thank's yaa....brother.......
om saya cobain qo ga bisa
Posting Komentar