Cara membuat multilevel dropdown menu dengan CSS | Salah 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.

Jika tidak ada menu maka besar kemungkinan pengunjung akan bingung dan merasa tersesat ketika bekunjung ke website tersebut. Jadi menu harus ada pada sebuah website, bahkan bukan cuma harus ada namun harus di desain dengan baik pula sesuai struktur halaman website.

multilevel dropdown menu css

Hasil akhir multilevel dropdown menu css

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.

Cara membuat menu dropdown multilevel dengan CSS

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

Struktur HTML

Pertama buat dulu struktur HTML nya seperti script dibawah ini, dimana terlihat ada banyak ul didalam ul, itulah yang akan membentuk sub menu nantinya.

<div class="nav">

<ul>
	<li><a href="">Home</a></li>
	<li><a href="">News</a></li>
	<li><a href="">Article</a></li>
	<li><a href="">Menu</a>

	<ul>
		<li><a href="">Submenu1</a></li>
		<li><a href="">Submenu2</a></li>
		<li><a href="">Submenu3</a>
		<ul>
			<li><a href="">Subsubmenu1</a></li>
			<li><a href="">Subsubmenu2</a></li>
			<li><a href="">Subsubmenu3</a>
			<ul>
				<li><a href="">subsubsubmenu1</a></li>
				<li><a href="">subsubsubmenu2</a></li>
				<li><a href="">subsubsubmenu3</a></li>
			</ul>
			</li>
		</ul>
		</li>
	</ul>
	</li>
</ul>

</div> <!--/ .nav -->

Style dengan CSS

Setelah struktur CSS dibuat selanjutnya agar menu dropdown multilevel bisa terlihat nyata dan menarik maka perlu di desain dengan CSS, berikut adalah kode CSS yang diperlukan.

.nav {
    width: auto;
    height: 60px;
    float: left;
    height: 60px;
    margin: auto;
}
.nav ul {
    list-style: none;
    display: inline-table;
    position: relative;
    padding: 0 20px;
    background: #006faa;
}
.nav ul li:hover > ul {
    display: block;
}
.nav ul:after {
    content: "";
    clear: both;
    display: block;
}
.nav ul li {
    float: left;
}
.nav ul li a{
    padding: 20px;
    text-decoration: none;
    color: #ececec;
    display: block;
    cursor: pointer;
}
.nav ul ul {
    background: #006faa;
    border-radius: 0px;
    padding: 0;
    position: absolute;
    top: 100%;
    display: none;
}
.nav ul ul li {
    float: none;
    border-top: 1px solid #def4ff;
    border-bottom: 1px solid #def4ff;
    position: relative;
}
.nav ul ul li a {
    padding: 15px 40px;
}
.nav ul ul ul {
    position: absolute;
    left: 100%;
    top: 0;
}

DownloadDemo