Cara Membuat Dropdown Menu Flat Design Dengan Mudah

Cara membuat dropdown menu sederhana dengan penerapan flat design.

untuk pembuatan dropdown menu sederhana tidak perlu menggunakan bahasa pemrograman yang terlalu sulit.
Cukup Anda kuasai/pahami 2 bahasa pemrograman berikut : HTML dan CSS.
Screenshot hasil jadi :

Lihat DEMO

Lihat Code Source Disni

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Navigation</title>
<style type="text/css">
body {
margin:0;
}
#headnav {
background:#27ae60;
font:0.9em "Trebuchet MS", Tahoma, Arial;
font-weight:800;
border-bottom:3px #16A085 solid;
}
#nav {
width:1080px;
margin:0 auto;
height:30px;
}
#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav ul li {
display: block;
position: relative;
float: left;
}
#nav li ul {
display: none;
}
#nav ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 7px 15px 8px 15px;
white-space: nowrap;
}
#nav ul li a:hover {
background:rgba(46, 204, 113,1.0);
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
-webkit-transition: background .25s ease-in-out;
}
#nav li:hover ul {
display: block;
position: absolute;
}
#nav li:hover li {
float: none;
}
#nav li:hover a { background: #27ae60; }
#nav li:hover li a:hover {
background: #2ecc71;
}
</style>
</head>
<body>
<div id="headnav">
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Unik</a></li>
<li><a href="#">Tips dan Trik</a>
<ul>
<li><a href="#">Relationship</a></li>
<li><a href="#">Kesehatan</a></li>
<li><a href="#">Internet</a></li>
</ul>
</li>
<li><a href="#">Website Info</a>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>

Atau Download Kodenya Disni