Membuat Drop Menu dengan CSS

Salah satu cara mempercantik blog yaitu dengan membuat Drop Menu seperti gambar dibawah ininggak usah kita ribet mikirin kode CSS yang ribet.
Berikut caranya:

1. Buka Edit html dan copikan kode css ini dibawah head

<style media='screen' type='text/css'>
body{list-style-type:none; behavior:url(&quot;csshover2.htc&quot;); }
.pd_menu_01 {float:left; padding:0; margin:0;color: #000000;background:
#666666;width:100%; border:solid 1px #FFFFFF;clear:both;} /*Color navigation bar
normal mode*/
.pd_menu_01 a, .pd_menu_01 a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
font-size:12px;
color: #FFFFFF;
background-color: #666666;
text-decoration: none;
}
.pd_menu_01 ul {padding:0; margin:0;}
.pd_menu_01 ul li {float:left; position:relative; z-index:auto !important ;
z-index:1000 ; border-right:solid 1px #FFFFFF; border-left:solid 1px #FFFFFF;}
.pd_menu_01 ul li a {color: #FFFFFF;background: #666666;float:none !important ;
float:left ; display:block; height:30px; line-height:30px; padding:0 10px 0
10px; text-decoration:none; }
.pd_menu_01 ul li ul {list-style-type:none; display:none; border:none;color:
#000000;background: #666666; width:1px}
.pd_menu_01 ul li:hover a {background-color:#DDDDDD; text-decoration:none;
color:#000000;} /*Color main cells hovering mode*/
.pd_menu_01 ul li:hover ul {display:block; position:absolute; z-index:999;
top:29px; margin-top:1px; left:0;}
.pd_menu_01 ul li:hover ul li a {display:block; width:12em; height:auto;
line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid
1px #FFFFFF; border-bottom: solid 1px #FFFFFF; background-color:#DDDDDD;
color:#000000;} /*Color subcells normal mode*/
.pd_menu_01 ul li:hover ul li a:hover {background-color:#666666; text-decoration:none;color:#ffffff;}
/*Color subcells hovering mode*/
.pd_menu_01 ul li a:hover {background-color:#DDDDDD; text-decoration:none;color:#000000;}
/*Color main cells hovering mode*/
.pd_menu_01 ul li a:hover ul {display:block; width:12em; position:absolute;
z-index:999; top:29px; left:0; }
.pd_menu_01 ul li ul li a:visited { background-color:#DDDDD; color:#000000;}
/*Color subcells normal mode*/
.pd_menu_01 ul li a:hover ul li a {display:block; width:12em; height:1px;
line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #FFFFFF;
border-bottom: solid 1px #FFFFFF; background-color:#DDDDDD; color:#000000;}
.pd_menu_01 ul li a:hover ul li a:hover {background-color:#DDDDDD; text-decoration:none;color:#000000;}
/*Color subcells hovering mode*/
</style>

2. Selanjutnya kopi kode berikut di bawah</head>

<div class='widget-content'>
<div class='pd_menu_01 '>
<ul><li><a href='http://asriyatno.blogspot.com/'>Home</a>
</li></ul>
<ul><li><a href='http://asriyatno.blogspot.com/search/label/Tentang%20blog?'>Blog
News</a>
<ul>
<li><a href='http://asriyatno.blogspot.com/2009/05/komentar-diblognya-rani-juliani.html'>Rani
Juliani</a></li>

<li><a href='http://asriyatno.blogspot.com/2009/04/dimana-bisa-belajar-blog_29.html'>Belajar
Blog</a></li>

<li><a href='http://asriyatno.blogspot.com/2009/02/gw-mau-ganti-template.html'>Ganti
Template</a></li>
<li><a href='http://asriyatno.blogspot.com/2009/02/gw-mau-ganti-template.html'>Ganti
Template</a></li>
<li><a href='http://asriyatno.blogspot.com/2009/08/template-blog-untuk-toko-online.html'>Template Toko Online</a></li>
<li><a href='http://asriyatno.blogspot.com/2009/03/ngeblog-udah-gak-jaman.html'>
Blogger Gak Jaman?</a></li>
</ul>
</li></ul>
</li></ul>
</div>
<div class='clear'/>

Kode diatas sebagai contoh saja anda bisa merubahnya sesuai url blog anda.

Selamat Mencoba.!!!! thank buat Nce yang udah bantuin becahin CSS

Author : Asriyatno

Seorang Blogger Kambuhan

Share this

Related Posts