Bikin Banyak Sub Sub Sub Menu Sederhana HTML CSS

Secara default, menu ditampilkan sebagai penuntun arah pengunjung agar tidak tersesat. Tapi saat ini sudah banyak sekali situs web yang membuat menu dengan sub nya bahkan beberapa tingkatan sub seperti yang akan kita bahas pada artikel ini.

Pertama, silahkan buat struktur sub sub sub menu pada HTML nya, saya contohkan seperti ini:

<div class="menu">
	<ul class="nav">
		<li><a href="">Menu Pertama</a></li>
		<li><a href="">Menu Kedua</a>
			<ul>
				<li><a href="">Contoh Sub Menu 1</a></li>
				<li><a href="">Contoh Sub Menu 2</a></li>
				<li><a href="">Contoh Sub Menu 3</a></li>
			</ul>
		</li>
		<li><a href="">Menu Ketiga</a>
			<ul>
				<li><a href="">Contoh Sub Menu 1</a></li>
				<li><a href="">Contoh Sub Menu 2</a></li>
				<li><a href="">Contoh Sub Menu 3</a>
					<ul>
						<li><a href="">Contoh Sub Sub Menu 1</a></li>
						<li><a href="">Contoh Sub Sub Menu 2</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="">Menu Keempat</a>
			<ul>
				<li><a href="">Contoh Sub Menu 1</a></li>
				<li><a href="">Contoh Sub Menu 2</a></li>
				<li><a href="">Contoh Sub Menu 3</a></li>
				<li><a href="">Contoh Sub Menu 4</a>
					<ul>
						<li><a href="">Contoh Sub Sub Menu 3</a></li>
						<li><a href="">Contoh Sub Sub Menu 3</a></li>
						<li><a href="">Contoh Sub Sub Menu 3</a>
							<ul>
								<li><a href="">Contoh Sub Sub Sub Menu 1</a></li>
								<li><a href="">Contoh Sub Sub Sub Menu 2</a></li>
								<li><a href="">Contoh Sub Sub Sub Menu 3</a></li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</div>

Bisa diperhatikan pada struktur tersebut di menu utama keempat terdapat sub sub sub menu, sesuai judul. Selanjutnya silahkan terapkan CSS untuk HTML tersebut seperti ini:

.nav {
		list-style: none;
		float: left;
		text-align: center;
	}
	.nav li {
		display: inline-block;
		position: relative;
		float: left;
		background: #c41617;
	}
	.nav li a {
		display: inline-block;
		width: 250px;
		line-height: 30px;
		text-decoration: none;
		color: #fff;
	}
	.nav li li {
		float: left;
	}
	.nav li li a {
		display: block;
	}
	.nav li:hover {
		background: #000;
	}
	.nav ul {
		position: absolute;
		left: 0;
		padding: 0;
		display: none;
	}
	.nav li:hover ul ul {
		display: none;
	}
	.nav li:hover ul ul ul {
		display: none;
	}
	.nav li:hover ul {
		display: block;
	}
	.nav li li:hover ul {
		margin-top: -30px;
		margin-left: 250px;
		display: block;
	}
	.nav li li li:hover ul {
		margin-top: -30px;
		margin-left: 250px;
		display: block;
	}

Soal nama class, silahkan ganti sesuai keinginan kalian kalo memang ingin diganti tapi ketika menggantinya di HTML maka perlu menggantinya juga di CSS. Sekarang, silahkan save dan lihat / buka file nya di browser dan selamat ! Kalian sudah berhasil membuat menu dengan banyak tingkatan sub menu. Jika ingin menambahkan tingkatan lagi silahkan lakukan ul dan li baru dengan memotong penutup /li pada menu induknya.

Catatan: Jika ingin menyesuaikan menu ini dengan template website yang digunakan, silahkan atur dari class menu (div) nya saja. Karena jika mengatur dari komponen yang ada didalam div class menu akan memerlukan perhatian khusus kecuali jika memang memahami HTML CSS lebih jauh lagi.

Masih bingung ? Lihat : Video tutorial cara membuat banya kanak menu HTML CSS.

Mau download file ini ? Klik disini!

Selamat mencoba !