Tutorial Blog: Cara Membuat CSS Drop Down Menu

Selasa, 12 Juli 2011

Cara Membuat CSS Drop Down Menu

Cara Membuat CSS Drop Down Menu Klik Aja Gambarnya Agar Terlihat Jelas
br/> 1. Copy paste ini kode dibawah ini di atas kode </head>
br/>

<style type="text/css">
.menu-secondary-wrap{padding:0;position:relative;height:56px;z-index:300;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFpa_IjuYoH-iMHDh9vT4lfvL8GhJD1nye2r_8e24gRFS-NHyYOZup9QUl9LR_5AQm5rQtgyz_cpmrXxbghyphenhyphend64-PHSUnPhLJP6POZvIwRsszkVjrDqC4_uNYCmCDYfHFyEzsoO_QHhxBa/s1600/menu-secondary-bg.png) left top repeat-x;margin-bottom:4px;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;padding-left:6px}
.menu-secondary{}
.menu-secondary ul{min-width:160px}
.menu-secondary li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKTldpTiw5EAm5aMWbw7SMMRN0L1Tqw6Rz5XdsPHKBnUD78Q-94JO0qztTh70DVaZtB4E009z-XOkeoLqty0N_FFpqGlSMH_HiQYlO5gI7GEGrNXElTCyvsogL0mfq1v_uFseuwfxgQxTB/s1600/menu-secondary-separator.png) right center no-repeat;margin:0 5px 0 0}
.menu-secondary li a{color:#E9EDE1;padding:19px 15px 22px 15px;text-decoration:none;text-transform:uppercase;font:bold 12px Arial,Helvetica,Sans-serif;margin:0 6px 0 0}
.menu-secondary li a:hover,.menu-secondary li a:active,.menu-secondary li a:focus,.menu-secondary li:hover > a,.menu-secondary li.current-cat > a,.menu-secondary li.current_page_item > a,.menu-secondary li.current-menu-item > a{color:#E9EDE1;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFpa_IjuYoH-iMHDh9vT4lfvL8GhJD1nye2r_8e24gRFS-NHyYOZup9QUl9LR_5AQm5rQtgyz_cpmrXxbghyphenhyphend64-PHSUnPhLJP6POZvIwRsszkVjrDqC4_uNYCmCDYfHFyEzsoO_QHhxBa/s1600/menu-secondary-bg.png) left -156px repeat-x;outline:0}
.menu-secondary li li a{color:#FFF;background:#6B9A05;padding:10px 15px;text-transform:none;margin:0;font-weight:normal;border:0}
.menu-secondary li li a:hover,.menu-secondary li li a:active,.menu-secondary li li a:focus,.menu-secondary li li:hover > a,.menu-secondary li li.current-cat > a,.menu-secondary li li.current_page_item > a,.menu-secondary li li.current-menu-item > a{color:#FFF;background:#9ADF06;outline:0}
.menu-secondary a.sf-with-ul{padding-right:26px;min-width:1px}
.menu-secondary .sf-sub-indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;padding:20px 13px 0 0}
.menu-secondary li li .sf-sub-indicator{padding:8px 13px 0 0}
.menu-secondary-wrap .sf-shadow ul{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD-DZsp8olkHyQ152Rrjxp-KOTq7tvMWOz79HXsLvxMf8rKctE7ZusR42kBtq_JLbsh0QGH7jUy-FiInCqxJPS22vKmURUW5TNsqdRSjdfDbTSyswveOgdnYswpXTsJR-N_sD4CK1u-QbH/s1600/menu-secondary-shadow.png') no-repeat bottom right}</style>

2. Berikut Pemasangan Html nya,taruh di atas kode <body>

<div class='span-24'><div class='menu-secondary-wrap'> <ul class='menus menu-secondary'><li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Business</a> <ul class='children'><li><a href='#'>Internet</a></li>
<li><a href='#'>Market</a></li>
<li><a href='#'>Stock</a></li>
</ul></li>
<li><a href='#'>Downloads</a> <ul class='children'><li><a href='#'>Dvd</a></li>
<li><a href='#'>Games</a></li>
<li><a href='#'>Software</a> <ul class='children'><li><a href='#'>Office</a> </li>
</ul></li>
</ul></li>
<li><a href='#'>Parent Category</a> <ul class='children'><li><a href='#'>Child Category 1</a> <ul class='children'><li><a href='#'>Sub Child Category 1</a></li>
<li><a href='#'>Sub Child Category 2</a></li>
<li><a href='#'>Sub Child Category 3</a></li>
</ul></li>
<li><a href='#'>Child Category 2</a></li>
<li><a href='#'>Child Category 3</a></li>
<li><a href='#'>Child Category 4</a></li>
</ul></li>
<li><a href='#'>Featured</a></li>
<li><a href='#'>Health</a> <ul class='children'><li><a href='#'>Childcare</a></li>
<li><a href='#'>Doctors</a></li>
</ul></li>
<li><a href='#'>music</a></li>
<li><a href='#'>Uncategorized</a></li>
</ul></div></div>

br/> Jika ada kesulitan,silahkan komentar ...

Tidak ada komentar:

Posting Komentar

Terima Kasih Telah Meringankan Tangan Sobat