Membuat Dropdown menu CSS

Artikel ini membahas bagaimana cara membuat menu drop down menggunakan CSS. Pada contoh ini, kita akan membuat sebuah menu dengan tag yang berfungsi untuk membuat list (<ul></ul>)

<ul>
    <li><a href="URL">MENU 1</a></li>
    <li><a href="URL">MENU 2</a></li>
    <li><a href="URL">MENU 3</a></li>
</ul>

Struktur tersebut akan menjadi sebuah menu, kita akan membuat agar menu-menu tersebut mempunyai sub menu lagi yang mana sub menu tersebut muncul ketika menu utamanya di sorot (drop down menu). sub menu akan dibuat di dalam list, artinya di dalam sebuah list ada list

<ul>
    <li><a href="URL">MENU 1</a>
        <ul>
            <li><a href="URL">Sub menu 1</a></li>
            <li><a href="URL">Sub menu 2</a></li>
            <li><a href="URL">Sub menu 3</a></li>
        </ul>
    </li>
    <li><a href="URL">MENU 2</a></li>
    <li><a href="URL">MENU 3</a></li>
</ul>

Selanjutnya kita akan mulai masuk ke css, pertama hilangkan list style pada TAG <ul>

#nav ul {
    list-style:none;
}

Untuk membuat menu tersebut tampil secara horizontal :

#nav li {
    float: left;
    position:relative;
}

menyembunyikan bagan list dari sub menu tersebut.

#nav ul ul {
    position:absolute;
    z-index:500;
    top:auto;
    display:none;
    padding: 1em;
    margin:-1em 0 0 -1em;
}

Selanjutnya kita akan buat sub menu di dalam sub menu, perintah ini digunakan agar sub menu di dalam sub menu tampil tepat disamping sub menu (sejajar)

#nav ul ul ul {
    top:0;
    left:100%;
}

Merubah kursor menjadi pointer ketika pointer menyorot ke menu

#nav li:hover
{
    cursor:pointer;
    z-index:100;
}

Perintah ini untuk menyembunyikan sub menu yang lainnya ketika menu di pilih, artinya menyembunyikan sub menu yang lain ketika salah satu anak menu tampil

#nav li:hover ul ul,
#nav li li:hover ul ul,
#nav li li li:hover ul ul
{display:none;}

Ini contoh jika style di atas tidak dituliskan. Ketika MENU 1 di sorot semua sub menu akan tampil

Menampilkan sub menu ketika menu parent nya di sorot

#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul
{display:block;}

Memberikan warna background yang berbeda ketika menu di sorot

#nav li a:hover {
    background:#0f74bd;
}

Hasil akhir dari drop down style menu ini akan seperti ini :

#nav ul {
    list-style:none;
}

#nav li {
    float: left;
    position:relative;
}

#nav ul ul {
    position:absolute;
    z-index:500;
    top:auto;
    display:none;
    padding: 1em;
    margin:-1em 0 0 -1em;
}

#nav ul ul ul {
    top:0;
    left:100%;
}

#nav li:hover
{
    cursor:pointer;
    z-index:100;
}

#nav li:hover ul ul,
#nav li li:hover ul ul,
#nav li li li:hover ul ul
{display:none;}

#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul
{display:block;}

#nav li a {
    background-color:#1c83ce;
    height: 1.5em;
    width: 150px;
    display: block;
    border: 0.1em solid #dcdce9;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
}

#nav li a:hover {
    background:#0f74bd;
}

ini hasil akhir html nya

<div id="nav">
    <ul>
        <li><a href="#">MENU 1</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>
                <ul>
                    <li><a href="#">Sub Sub menu 1</a></li>
                    <li><a href="#">Sub Sub menu 2</a></li>
                    <li><a href="#">Sub Sub menu 3</a>
                    <ul>
                        <li><a href="#">Sub Sub Sub menu 1</a></li>
                        <li><a href="#">Sub Sub Sub menu 2</a></li>
                        <li><a href="#">Sub Sub Sub menu 3</a></li>
                    </ul>
                    </li>
                </ul>
            </li>
        </ul>
        </li>
        <li><a href="URL 2">#</a></li>
        <li><a href="URL 3">#</a></li>
    </ul>
</div>

Alfa Adhitya Member since December 18, 2019

Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter – Eric S