Cara membuat menu dropdown dengan CSS

Cara membuat menu dropdown dengan CSSSalah satu elemen yang sangat penting pada sebuah website adalah menu navigasi, bagian inilah yang akan menjadi pemandu para pengunjung ketika menjelajahi seluruh halaman yang ada pada sebuah website.

Menu bisa saja dibuat simpel, namun ketika menu website memiliki banyak sub bagian maka perlu dibuat menu yang multilevel, sehingga pengunjung bisa dengan mudah langsung menuju sub bagian yang dia inginkan.

Berikut ini cara membuat menu dropdown vertikal dengan CSS, kita tidak perlu Javascript untuk membuatnya.

Pertama, buatlah struktur HTML menu yang ingin dibuat. Contoh Seperti di bawah ini :
<html>
<head>
<title>Tugas Coy</title>
</head>
<body>
<nav>
    <ul>
    <li><a href="#">Makanan</a>
<ul>
<li><a href="#">Nasi Goreng</a></li>
<li><a href="#">Nasi Padang</a></li>
</ul>
    </li>
    <li><a href="#">Juice</a>
<ul>
<li><a href="#">Juice Alpukat</a></li>
<li><a href="#">Juice Jerukl</a></li>
</ul>
</li>
    </ul>
</nav>
</body>
</html>
Tampilan setelah di simpan dan dirunkan


Memang terlihat sangat tidak menarik karena memang kita belum menambahkan code CSS untuk mempercantik tampilan menu tersebut. silahkan tambahkan code css di bawah ini sebelum </head>.

<style>
nav ul ul {
 display: none;
}
nav ul li:hover > ul {
 display: block;
}
nav ul {
 background: skyblue;
 padding: 0;
 list-style: none;
 position: relative;
 display: inline-table;
}
nav ul:after {
 content: "";
 clear: both;
 display: block;
}
nav ul li {
 position:relative;
 width:150;
}
nav ul li:hover {
 background: #1b9bff;
}
nav ul li:hover a {
 color: #fff;
}
nav ul li a {
 display: block;
 padding: 12px 25px;
 color: black;
 text-decoration: none;
}
nav ul ul {
 background: #1b9bff;
 border-radius: 0px;
 padding: 0;
 position: absolute;
 top:0;
 left:100%;
}
nav ul ul li {
 float: none;
 position: relative;
}
nav ul ul li a {
 padding: 12px 25px;
 color: skyblue;
}
nav ul ul li a:hover {
 background: skyblue;
}
</style>

 Nah jika digabungkan semua filenya maka akan menjadi seperti di bawah ini.
<html>
<head>
<title>Tugas Coy</title>
<style>
nav ul ul {
 display: none;
}
nav ul li:hover > ul {
 display: block;
}
nav ul {
 background: skyblue;
 padding: 0;
 list-style: none;
 position: relative;
 display: inline-table;
}
nav ul:after {
 content: "";
 clear: both;
 display: block;
}
nav ul li {
 position:relative;
 width:150;
}
nav ul li:hover {
 background: #1b9bff;
}
nav ul li:hover a {
 color: #fff;
}
nav ul li a {
 display: block;
 padding: 12px 25px;
 color: black;
 text-decoration: none;
}
nav ul ul {
 background: #1b9bff;
 border-radius: 0px;
 padding: 0;
 position: absolute;
 top:0;
 left:100%;
}
nav ul ul li {
 float: none;
 position: relative;
}
nav ul ul li a {
 padding: 12px 25px;
 color: skyblue;
}
nav ul ul li a:hover {
 background: skyblue;
}
</style>
</head>
<body>
<nav>
    <ul>
    <li><a href="#">Makanan</a>
<ul>
<li><a href="#">Nasi Goreng</a></li>
<li><a href="#">Nasi Padang</a></li>
</ul>
    </li>
    <li><a href="#">Juice</a>
<ul>
<li><a href="#">Juice Alpukat</a></li>
<li><a href="#">Juice Jerukl</a></li>
</ul>
</li>
    </ul>
</nav>
</body>
</html>

Nah, setelah kamu simpan dan jalankan maka tampilannya akan seperti di bawah ini:

Sekian tutorial CSS tentang cara membuat menu vertical dengan CSS, jika ada kesalahan atau yang ingin ditanyakan silahkan di comment, Semoga bermanfaat. Terimakasih :)

No comments for "Cara membuat menu dropdown dengan CSS"