Cara Membuat Menu Drop Down Dengan CSS3

Kali ini saya akan membahas bagai mana cara membuat Drop Down Menu dengan CSS3, banyak orang yang pingin mendesai Blog nya dengan Menu Drop Down yang keren dan bagus,nah ini kesempatan baik bagi para blogger untuk memasang menu Drop Down ini yang menggunakan CSS3 ini di blog kamu, cara nya membuat nya sangat mudah, dan tidak ribet, dan jika kamu pernah melihat artikel Cara Membuat Menu Horizontal Drop Down di bog ini, dan mengalami kesulitan atau kegagalan coba sekarang gunakan Menu Drop Down CSS3 yang satu ini.

Berikut Cara Membuat Menu Drop Down Dengan CSS3 :

1. Add Gadget > HTML Java Script, copy kode di bawah ini.

<style>
/*------ CSS3 Drop Down Menu By www.lukas-trys.blogspot.com ---------*/
#menu
{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #111;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}
#menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
}
#menu a
{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a
{
color: #fafafa;
}
*html #menu li a:hover /* IE6 */
{
color: #fafafa;
}
#menu li:hover > ul
{
display: block;
}
/* Sub-menu */
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu ul ul
{
top: 0;
left: 150px;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a
{
padding: 10px;
height: 10px;
width: 130px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
}
#menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
#menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}

#menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>
<ul id="menu">
<li><a href="*">Home</a></li>
li><a href="*">About Me</a>
<ul>
<li><a href="*">Contact Me</a></li>
<li><a href="*">Pasang Iklan</a></li>
</ul>
</li> 
<li><a href="*">Berita</a>
<ul>
<li><a href="*">Berita</a></li>
<li><a href="*">Kriminal</a></li>
<li><a href="*">Olahraga</a></li>
</ul>
</li>
<li><a href="*">Informasi</a>
<ul>
<li><a href="*">Indonesia</a></li>
<li><a href="*">Unik</a></li>
<li><a href="*">Kesehatan</a></li>
</ul>
</li> 
<li><a href="*">Rohani</a>
<ul>
<li><a href="*">Kesaksian</a></li>
<li><a href="*">Renungan</a></li>
</ul>
</li> 
<li><a href="*">Teknologi</a>
<ul>
<li><a href="*">Gadget</a></li>
<li><a href="*">Teknologi</a></li>
</ul>
</li>
<li><a href="*">Tutorial Blogger</a></li>
</ul>

2. Save.


Nb : - Ganti tanda * dengan Url yang di tuju.
        - Anda dapat merubah menu sesuai keinginan anda


Tertanda,
Tio Rendika Yeremia Sitanggang

Ditulis oleh: Unknown - Thursday, 8 November 2012 - Rating: 5

Terima kasih sudah membaca artikel kategori Download dengan judul Cara Membuat Menu Drop Down Dengan CSS3. Anda bisa bookmark halaman ini dengan URL http://lukas-trys.blogspot.com/2012/11/cara-membuat-menu-drop-down-dengan-css3.html. Jangan lupa share ke teman-teman ya.

Tweet