-->

Halo !!! Saya Kang Ismet, ini adalah blog tentang AMP HTML dan cara penerapannya

Cara Membuat menu Drop down dengan CSS/HTML

CSS
By

DROP DOWN CSS WITH HTML


menu Drop down


CSS yang memiliki kepanjangan Cascade Style Sheet ini digunakan para web designer untuk mengatur style elemen yang ada dalam halaman web mereka, mulai dari memformat text, sampai pada memformat layout. Tujuan dari penggunaan CSS ini adalah supaya diperoleh suatu kekonsistenan style pada elemen tertentu.
Nah pada kesempatan Kali ini saya akan membuat Tutorial yang masih ada Hubungannya dengan CSS/HTML.Tutorial ini membahas tentang bagaimana cara membuat menu drop down dengan menggunakan CSS dan HTML.Cara penggabungan kedua Elemen inipun bisa dilakukan dengan Dua cara,yakni menggabungkan secara external dan internal.untuk lebih jelasnya tentang penggabungan external dan internal anda bisa Baca disini.

Nah kembali ke topic semula,Kali ini saya menggunakan metode penggabungan secara internal,dimana kode CSS yang akan kita buat digabungkan dengan kode HTML,tepatnya dibawah Tag <head> dan di akhir tag </head> Tanpa basi basi lagi mari kita mulai mempraktekkan Hal tersebut :

Kode HTML Silhkan copy ke notepad :

Kode Css Silahkan di copy juga dan di simpan tepat di bawah tag <head>

  • Jika keduanya disatukan Maka akan terlihat seperti di bawah ini dan hasilnya bisa anda lihat Gambar diatas :
<html>
<head>
<title> Belajar menu drop down </title>
<style type="text/css">
.dropmenu {
    background: #616161;
    height: 30px;
    list-style-type: none;
    margin: 0;
    padding: 0px;
}
.dropmenu li {
    border-right: solid 1px white;
    float: left;
    height: 30px;
}
.dropmenu li a {
    color: #fff;
    display: block;
    font: 12px arial, verdana, sans-serif;
    font-weight: bold;
    padding: 9px 20px;
    text-decoration: none;
}
.dropmenu li:hover { background: #778899; position: relative; }
.dropmenu li:hover a { text-decoration: underline; }
.dropmenu li:hover ul {
    background-color: #3f4a54;
    border: 1px solid grey;
    left: 0px;
    padding: 3px;
    top: 30px;
    width: 160px;
}
.dropmenu li:hover ul li { border: none; height: 18px; }
.dropmenu li:hover ul li a {
    background-color: #778899;
    border: 1px solid transparent;
    color: #fff;
    display: block;
    font-size: 11px;
    height: 18px;
    line-height: 18px;
    padding: 0px;
    text-decoration: none;
    text-indent: 5px;
    width: 158px;
    padding: 3px;
}
.dropmenu li:hover ul li a:hover {
    background: silver;
    border: solid 1px #444;
    color: #000;
    height: 18px;
    padding: 3px;
}
.dropmenu ul {
    left: -9999px;
    list-style-type: none;
    position: absolute;
    top: -9999px;
}
</style>
</head>
<boyd>
<ul class="dropmenu">
<li><a href="#1">Menu 1</a>
    <ul>
    <li><a href="#11">Sub Menu 1</a></li>
    <li><a href="#22">Sub Menu 2</a></li>
    </ul>
</li>
<li><a href="#2">Menu 2</a>
    <ul>
    <li><a href="#21">Sub Menu 1</a></li>
    <li><a href="#22">Sub Menu 2</a></li>
    <li><a href="#23">Sub Menu 3</a></li>
    <li><a href="#24">Sub Menu 4</a></li>
    </ul>
</li>
<li><a href="#3">Menu 3</a>
    <ul>
    <li><a href="#31">Sub Menu 1</a></li>
    <li><a href="#32">Sub Menu 2</a></li>
    <li><a href="#33">Sub Menu 3</a></li>
    <li><a href="#34">Sub Menu 4</a></li>
    </ul>
</li>
</ul>
</body>
</html>

Related Posts

Tambahkan Komentar

Disqus Comments

12 komentar:

  1. AKUMARU.comMay 31, 2013 at 10:29 PM

    Nice share gan ane coba dulu

    ReplyDelete
  2. supriadiDecember 8, 2013 at 3:16 AM

    thanks infonya, mudah dipahami dan bermanfaat

    ReplyDelete
  3. UnknownDecember 9, 2013 at 6:05 AM

    thanks gan, sangat bermanfaat untuk pembelajaran

    ReplyDelete
  4. indraNovember 2, 2014 at 7:55 PM

    klo 3 cabang gimana gan?

    ReplyDelete
  5. Ahmad YusufDecember 8, 2014 at 4:13 AM

    thank toturialnya gan sekarang blogku ada menu drop downnya
    Ahmad sites
    ahmadnotes

    ReplyDelete
  6. UnknownDecember 24, 2014 at 8:59 AM

    wah tutorial nya keren gan ....

    Tukeran Link Yuk gan ....

    Siapa yang mau silakan cek : http://www.alihtc.com/2014/12/tukar-link.html

    ReplyDelete
  7. SHIP CHANDLER IN DUMAIFebruary 12, 2015 at 6:49 PM

    terima kasih,tutorialnya sangat bermanfaat.

    ReplyDelete
  8. UnknownJuly 10, 2015 at 12:11 AM

    This comment has been removed by the author.

    ReplyDelete
  9. Obat Bius Wanita Obat Bius Ampuh Obat Bius MurahAugust 25, 2015 at 2:54 AM

    Obat bius liquid sex

    Obat bius soporific

    Obat bius chloroform

    Obat tidur cair sleeping beauty

    Obat bius cair trivam propofol

    pemesanan : 081327496009 BB 56EA4F2F

    WWWW.OBATBIUSASLI.COM

    ReplyDelete
  10. UnknownNovember 24, 2015 at 11:38 PM

    infonya sangat bermanpaat,thanks infonya mastiki sumbawa

    ReplyDelete
  11. chiby loupattyMarch 10, 2016 at 11:25 PM

    jadi nambah pengetahuan...terima kasih sudah berbagi gan
    honda bandung

    ReplyDelete
  12. Prediksi Bola Jitu 2017March 7, 2017 at 4:51 AM

    Ijin Share & Promot Min :


    [Promo] Dapatkan Bonus Promo SPECIAL Khusus Sampai Akhir Bulan Maret 2017 Menanti Anda Hanya Di ( >> www.bavetline88.com << )
    Cukup Dengan Menekan 1 Klik Link Website Ini ( >> www.bavetline88.com << ) Bonus Ditangan Anda :

    ~ Bonus Sportsbook ~

    1. Bonus 20% untuk member baru Sbobet, Ibcbet dan Asia77.
    2. Bonus minimal deposit awal hingga Rp 300.000,-.
    3. Bonus Maximal yang diberikan perhari mencapai hingga Rp.1.000.000.
    4. Bonus kemenangan 5% untuk produk Sbobet, Ibcbet, Asia77.
    5. Promo rollingan sebesar 0.5% dan 0.7%.
    6. Promo cashback hingga 5%.

    ~ Bonus Casino Online ~

    1. Dapatkan Bonus 10% untuk member baru 338A, 1S Casino, Asia8bet.
    2. Bonus minimal deposit awal hingga Rp 300.000,-.
    3. Bonus Maximal yang diberikan per hari mencapai hingga Rp.1.000.000,-.
    4. Bonus kemenangan 2.5% dari Deposit.
    5. Bonus Cashback hingga 5% diberikan kepada member yang mengalami kekalahan diatas Rp.1.000.000,-.
    6. Bonus Cashback hingga 10% diberikan kepada member yang mengalami kekalahan diatas Rp.10.000.000,-.
    7. Bonus Rollingan hingga 1% untuk semua permainan Casino.

    ~ Bonus Tangkas ~

    1. Bonus Deposit awal hingga 20% Khusus Produk Bola Tangkas dan Tangkasnet.

    ~ Bonus Asia Poker 77 ~

    1.Dapatkan komisi Rollingan Hingga 2% yang sudah di set kedalam ID Asia Poker 77 milik anda.

    ~ ( BONUS REFERENSI ) ~

    1. Bila Anda Mengajak Dan Mengenalkan Bavetline Kepada Teman Anda Maka Anda Mendapatkan Bonus Rollingan Hingga 0.5% (All SportsBook).
    2. Bila Anda Mengajak Dan Mengenalkan Bavetline Kepada Teman Anda Maka Anda Mendapatkan Bonus Rollingan 0.4% (All Casino).

    ( Note : Syarat Dan Ketentuan Berlaku )

    Ayo Segera Bergabung Menjadi Salah Satu Bagian Dari Kami Dapatkan Bonus Promo SPECIAL Berlimpah Menanti Anda hanya di ( >> www.bavetline88.com << )

    ReplyDelete