Cara Membuat Menu Dropdown Murni HTML dan CSS

Menu web/blog sangat bervariasi salah satunya dibuat dengan style css, ada bentuk menu yang berupa text maupun hanya gambar biasa, dan ada juga bentuk-bentuk menu dropdown/menu bercabang secara horizontal atau vertikal. Pembuatannya juga bervariasi, ada yang menggunakan javascript, ada juga menggunakan jquery, bahkan ada yang membuat menu dari flash. Pada kesempatan kali ini saya akan membagikan ilmu bagaimana cara membuat menu dropdown horizontal yang murni dibuat hanya dengan css.

Selain untuk mempermudah navigasi, Dropdown menu juga memiliki nilai tambah tersendiri, seperti kenyaman. Tak hanya pemilik web/blog saja , pengunjung pun mungkin akan merasa nyaman juga dengan adanya menu dropdown. Oke langsung saja.

Cara Membuat Menu Dropdown Murni CSS

Langkah pertama yaitu dengan membuat struktur HTML nya terlebih dahulu. Dan berikut struktur HTML nya.

<ul class="dropmenu">
<li><a href="#">Menu 1</a>
    <ul>
    <li><a href="#">Sub Menu 1</a></li>
    <li><a href="#">Sub Menu 2</a></li>
    </ul>
</li>
<li><a href="#">Menu 2</a>
    <ul>
    <li><a href="#">Sub Menu 1</a></li>
    <li><a href="#">Sub Menu 2</a></li>
    <li><a href="#">Sub Menu 3</a></li>
    <li><a href="#">Sub Menu 4</a></li>
    </ul>
</li>
<li><a href="#">Menu 3</a>
    <ul>
    <li><a href="#">Sub Menu 1</a></li>
    <li><a href="#">Sub Menu 2</a></li>
    <li><a href="#">Sub Menu 3</a></li>
    <li><a href="#">Sub Menu 4</a></li>
    </ul>
</li>
</ul>

dan tidak lupa style CSS nya, bisa ambil di bawah ini :

.dropmenu {
    background: #0099ff;
    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 25px;
    text-decoration: none;
}
.dropmenu li:hover { background: #778899; position: relative; }
.dropmenu li:hover a { text-decoration: underline; }
.dropmenu li:hover ul {
    background-color: transparent;
    border: none;
    left: 0px;
    padding: 3px;
    top: 30px;
    width: 150px;
}
.dropmenu li:hover ul li { border: none; height: 18px; }
.dropmenu li:hover ul li a {
    background-color: #33cccc;
    border: 1px solid transparent;
    color: #fff;
    display: block;
    font-size: 11px;
    height: 18px;
    line-height: 18px;
    padding: 5px;
    text-decoration: none;
    text-indent: 5px;
    width: 150px;
    padding: 3px;
}
.dropmenu li:hover ul li a:hover {
    background: silver;
    border: solid 1px #444;
    color: #000;
    height: 15px;
    padding: 3px;
}
.dropmenu ul {
    left: -9999px;
    list-style-type: none;
    position: absolute;
    top: -9999px;
}

Okee, sekian kesempatan kali ini, semoga bisa bermanfaat bagi diri kita. Sekian, sampai jumpa.

Share this post