Cara Membuat CSS Drop Down Menu

0

Cara Membuat CSS Drop Down Menu

Selasa, 12 Juli 2011 Mufa1st

Share this Article on :

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/AVvXsEiUi8B6rzinZaeO1ybJdGVG0p9xjB9d-5_NN46CtuKiBlj3Koh1LPe8kXbeHapxfFCduiIPoGEVv4-eTL_QHs4J0jQwuByOaESIfj7pUIJmzmiKVXTdcKzeBk15A6NOx-CF0KcTx0iqlYwR/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/AVvXsEhZY4QQRzynJPTZ1vH9mFOtiJtoa6mTrlvvZGeLvljskJNzuYM-5mvXjZuJ4hn4oyBtQ1Ew5lclcTV6TIcmubT88SC5KrcBwBtdEEVMKV1LpSpnEmfNMqxVVlYKzCvOvSGFZitletLcv5ek/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/AVvXsEiUi8B6rzinZaeO1ybJdGVG0p9xjB9d-5_NN46CtuKiBlj3Koh1LPe8kXbeHapxfFCduiIPoGEVv4-eTL_QHs4J0jQwuByOaESIfj7pUIJmzmiKVXTdcKzeBk15A6NOx-CF0KcTx0iqlYwR/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/AVvXsEjhbHWR0xVSmuUiXCZz-iYyqfjEovVaYfYiHp0_vmhpqnjhu1s5G8I3WOz8nFV9SXsXspZFr4g4725WpVlpTB-_TDBSFZvK0Ni1sG4w8PNGwu_sC5wWKAkIhj62hxTEVGnLclswYbw5JVdR/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 ...

Artikel Terkait:

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)