Tips Membuat Menu Didalam Menu Dengan HTML5 & CSS3

Hallo teman teman balik lagi dengan saya Ismet Maulana kali ini saya ingin berbagi pengetahuan tentang Tips Membuat Menu Didalam Menu Dengan HTML5 & CSS3, teman teman pernah yah melihat suatu website yang terdapat menu yang banyak

namun dihalaman utamanya terlihat menunya sedikit tapi ketika kursor yang kita tuju ke suatu menu maka akan muncul menu didalamnya, sebenarnya sederhana saja dalam proses pembuatannya cukup dengan css3 saja, oke tanpa berlama lama kita langsung saja yah, teman teman bisa langsung coba dan salinkan scriptnya dibawah sini :

<body>
	<div class="container">
		<nav>
			<ul>
				<li><a href="">BERANDA</a></li>
				<li><a href="">PROFIL</a></li>
				<li class="ser"><a href="">SERVIS</a>
					<div class="tampung">
						<div class="atas">
							<div class="kiri">
								<ul>
									<li><a href="">MENU KIRI</a></li>
									<li><a href="">MENU TENGAH</a></li>
									<li><a href="">MENU KANAN</a></li>
								</ul>
							</div>
							<div class="tengah">
								<ul>
									<li><a href="">MENU TENGAH</a></li>
									<li><a href="">MENU TENGAH</a></li>
									<li><a href="">MENU TENGAH</a></li>
								</ul>
							</div>
							<div class="kanan">
								<ul>
									<li><a href="">MENU KANAN</a></li>
									<li><a href="">MENU KANAN</a></li>
									<li><a href="">MENU KANAN</a></li>
								</ul>
							</div>
						</div>
					</div>
				</li>
				<li><a href="">KONTAK</a></li>
				<li><a href="">TESTIMONI</a></li>
			</ul>
		</nav>
	</div>
</body>

lalu salinkan juga css :

<style>
	* {padding: 0; margin: 0}
	body {background: #eee}
	.container {width: 900px; margin: auto;}
	/* MENU */
	nav {width: 750px;}
	nav ul li {float: left; width: 20%; list-style: none}
	nav li a {text-decoration: none; color: red; display: block; padding: 10px;}
	nav li a:hover {color: black;}
	nav ul .ser:hover .atas {display: block;position: absolute; top: 40px; left:0; width: 100%; margin: auto;}

	/* tampung */
	
	.tampung { width: 100%; }
	.atas {width: 800px; margin: auto; overflow: hidden; display: none;border-top: 1px solid black}
	
	/* MENU KIRI */
	.kiri {float: left; width: 300px; margin-left: 500px; }
	.kiri ul li {list-style: none; float: none; width: 45%}
	.kiri li a{text-decoration: none; color: red; display: block !important; padding: 10px;}
	.kiri li a:hover {background: lightblue; color: red}

	/* MENU TENGAH */

	.tengah {float: left; margin-left: -20px; width: 300px}
	.tengah ul li {list-style: none; float: none; width: 45%}
	
	/* MENU KANAN */

	.kanan {float: right;  width: 300px; margin-right: 538px;}
	.kanan ul li {list-style: none; float: none; width: 45%}


</style>

Jika sudah coba teman teman save dan jalankan lalu arahkan cursornya ke menu SERVIS maka terdapat menu lagi didalamnya, oke cukup mudah yah, sekian tutorial tentang Tips Membuat Menu Didalam Menu Dengan HTML5 & CSS3 sampai bertemu di artikel selanjutnya dan sampai jumpa, SELAMAT MENCOBA .

#KeepLearn

#IsmetMA