Membuat Menu Dropdown dengan CSS3

Kali saya akan memberikan cara membuat menu dropdown dengan css. Menu Dropdown ini sangat menarik sekali karena murni memakai CSS tidak ada tambah code.

D E M O

Mari kita simak bersama-sama trik kali ini.

Langkah 1
Index. HTML

<div class="wrapper">
<ul>
<li id="a"><a href="#a">Web Design</a>
<div>
<hr/><b>HTML:</b> <a href="#">Tutorials</a> | <a href="#">Resources</a>
<hr/><b>CSS:</b> <a href="#">Tutorials</a> | <a href="#">Examples</a>
<hr/><b>CMS:</b> <a href="#">Drupal</a> | <a href="#">Wordpress</a>
</div>
</li>
<li id="b"><a href="#b">Graphic Design</a>
<div>
<hr/><b><a href="#">Printmaking</a></b>
<hr/><b><a href="#">Visual Arts</a></b>
</div>
</li>
<li id="c"><a href="#c">Animation &amp; Graphics</a>
<div>
<hr/><b>2D Animation:</b><br /> <a href="#">Analog animation</a> | <a href="#">Flash animation</a>
<hr/><b>3D Animation:</b><br /> <a href="#">Motion capture</a> | <a href="#">Photo realistic</a>
</div>
</li>
<li id="d"><a href="#d">Design Resources</a>
<div>
<hr/><b><a href="#">w3schools.com</a></b>
<hr/><b><a href="#">alistapart.com</a></b>
<hr/><b><a href="#">smashingmagazine.com</a></b>
</div>
</li>
</ul>
</div>

Langkah 2
Index. CSS

.wrapper {
width: 600px;
position: absolute; }
.wrapper ul {
list-style: none; }
.wrapper ul li {
background-color: #F8F8F8;
border: 1px solid #a9a9a9;
display: block;
float: left;
font: bold 12px arial;
height: 30px;
line-height: 30px;
overflow: hidden;
padding-left: 15px;
position: absolute;
width: 135px;
z-index: 10000;
-webkit-box-shadow:0px 3px 5px #cacaca;
-moz-box-shadow:0px 3px 5px #cacaca;
box-shadow:0px 3px 5px #cacaca;
background: linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);}
.wrapper ul li:hover {
background: linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);}
.wrapper ul li:first-child {
-moz-border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px; }
.wrapper ul li:last-child {
-moz-border-radius: 0 4px 4px 0;
-webkit-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0; }
.wrapper ul li#b {
margin-left: 151px; }
.wrapper ul li#c {
margin-left: 302px; }
.wrapper ul li#d {
margin-left: 453px; }
.wrapper ul li a {
display: block;
text-decoration: none;
color: #303030; }
.wrapper ul li div {
text-align: left;
font: normal 11px arial;
line-height: 19px;
margin: 10px 0; }
.wrapper ul li div a {
display: inline; }
.wrapper ul li div a:hover {
text-decoration: underline; }
.wrapper ul li div hr {
border: none;
border-top: 1px dotted #a0a0a0;
margin: 5px 0;
width: 95%; }
.wrapper ul li:hover:target {
display: inherit;
padding: 0px;
padding-left:15px;
opacity: .97;
-moz-opacity: .97;
-webkit-transition: height 0.4s ease-in; }
.wrapper ul li#a:hover:target {
height: 130px;
width: 350px;
background: #f0f9ff; }
.wrapper ul li#b:hover:target {
height: 105px;
background: #ffffd6; }
.wrapper ul li#c:hover:target {
height: 145px;
width: 200px;
background: #f8ffe8; }
.wrapper ul li#d:hover:target {
height: 140px;
width: 165px;
position: relative;
float: right;
margin-right: -5px;
z-index: 0;
text-align: center;
background: #f9f286; }