Postingan lainnya

Drop Down Hrizontal dengan 3 level menu

ass, permisi gan, ane mau tanya cara buat dropdown 3 level, dari tadi ane ngulik ga ketemu, tutor yang lain ane ga mudeng, cuma tutor dropdown disini yang ane paham tapi ga sampai 3 level, css nya yang ane buat cuma sampai menu level 1 hehehe mohon bimbinganya :)

//html nya
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

	<nav>
		<ul>
			<li>Menu 1</li>
			<li>Menu 2
				<ul>
					<li>Sub Menu 2,1</li>
					<li>Sub Menu 2,2
						<ul>
							<li>Sub Sub Menu 2,2,1</li>
							<li>Sub Sub Menu 2,2,2
								<ul>
									<li>Sub Sub Sub Menu level 3</li>
									<li>Sub Sub Sub Menu level 3</li>
								</ul>
							</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</nav>

</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------------------
css nya//

*{
	padding:0;
	margin:0;
}

nav > ul > li{
	float:left;
	width:25%;
	border-right: 1px solid black;
	box-sizing:border-box;
}

li{
	list-style:none;
	text-align:center;
	font-size: 23px;
	height: 40px;
	line-height: 40px;
	background-color: yellow;
}

li:hover{
	background-color:aqua;
}

li:last-child{
	border:none;
}

li ul{
	display: none;
}

li:hover ul{
	display:block;
	position: relative;
}

li ul li{
	border-bottom: 1px solid black;
}

li ul li:hover{
	background-color: red;
}

a{
	text-decoration:none;
	color:black;
}

bebas

@Satrio

4 Kontribusi 1 Poin

Diperbarui 8 tahun yang lalu

2 Jawaban:

mungkin tiap bagian ul di kasih class

<ul class="ul1">
	<li>drop 1</li>
	<li>
		<ul class="ul2">
			<li>drop 2</li>
		</ul>
	</li>
</ul>

//bagian css

.ul1>li{
	float:left;
	list-style:none;
}
.ul2>l1{
	list-style:none;
}

@ardyhim

289 Kontribusi 175 Poin

Dipost 8 tahun yang lalu

3 level?

kayaknya pernah buat,

ul li{
...
position:relative;
}
ul ul{
...
position:absolute; // Biasanya berlaku ke ul ke bawah juga
display:none; // sembunyikan dulu
}
ul li:hover > ul{
...
display:block; // jika parentnya di hover, maka keluar anaknya
}

kayaknya gak jauh beda dari dasarnya cuma setting sedikit di bagian CSS

@manksolin

22 Kontribusi 1 Poin

Dipost 8 tahun yang lalu