Belajar CSS (23. Dropdown)

Belajar CSS (23. Dropdown)

Diskripsi: Dropdwon adalah list yang muncul saat kita mengarahkan kursor ke salah satu menu.
kita tapat menggunakan contoh tag span atau button untuk menu nya dan tag div sebagai container list dropdown.

Pada pembuatan dropdown kita membutuhkan class .dropdown dan dropdown-content. Agar lebih memahami, perhatikan dan pelajari contoh dibawah
ex.

<!DOCTYPE html>
<html>
<head>
	<title>belajar dropdown</title>
	<style>
		ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
			overflow: hidden;
			background-color: blue;
		}
		li {
			float: left;
		}
		li a, .dropbtn {
			display: inline-block;
			color: white;
			text-align: center;
			padding: 14px 16px;
			text-decoration: none;
		}
		li a:hover, .dropdown:hover .dropbtn{
			background-color: #111;
		}
		.dropdown {
			display: inline-block;
		}
		.dropdown-content {
			display: none; 
			position: absolute;
			background-color: red;
			min-width: 150px;
			box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
		}
		.dropdown-content a {
			color: white;
			padding: 12px 16px;
			text-decoration: underline;
			display: block;
		}
		.dropdown-content a:hover {
			background-color: #f1f1f1;
		}
		.dropdown:hover .dropdown-content {
			display: block;
		}
	</style>
</head>
<body>	
	<h1>Belajar Dropdwn</h1>
	<p>arahkan kursor untuk melihat hasil pembuatan dropdown</p>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<div class="dropdown">
			<a href="#" class="dropbtn">Dropdown</a>
			<div class="dropdown-content">
				<a href="#">list1</a>
				<a href="#">list2</a>
				<a href="#">list3</a>
			</div>
		</div>
	</ul>
</body>
</html>

hasil

Semoga bermanfaat, sampai jumpa dipostingan selanjutnya.

Leave a Reply

Your email address will not be published.Required fields are marked *