Tampilkan Submenu
Termasuk bagian Menguasai CSS dalam perjalanan HTML di Coddy. Pelajaran 18 dari 43.
Tantangan
MudahSetelah submenu ditambahkan, kamu mungkin menyadari tampilannya kurang bagus. Submenu selalu terlihat, dan tata letaknya tidak sesuai dengan yang kita inginkan.
Dalam pelajaran ini, kamu akan menulis CSS untuk menyembunyikan submenu secara default dan menampilkannya saat kursor diarahkan ke atasnya, seperti menu dropdown sungguhan. Kamu juga akan menambahkan beberapa style sederhana agar tampilannya lebih rapi.
- Sembunyikan submenu secara default
Gunakan propertydisplay: none;pada.submenu. - Tampilkan submenu saat kursor diarahkan ke atasnya
Gunakan selector.has-submenu:hover .submenudan aturdisplay: block;. - Posisikan submenu di bawah item induknya
Aturposition: absolute;pada.submenu.
Pastikan.has-submenumemilikiposition: relative;agar submenu berfungsi. - Beri style pada submenu agar tampilannya lebih baik
- Atur warna latar belakang
- Hapus style list default dengan
list-style: none; - Tambahkan jarak di dalam setiap item menggunakan
padding: 10px; - Tambahkan lebar yang sesuai
Silakan sesuaikan apa pun, warna, font, border, buat tampilannya sesuai keinginanmu!
Coba sendiri
<html>
<head>
<title>Dropdown Menu</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section class="menu-panel">
<h2>Hobby Club</h2>
<nav class="top-menu">
<ul class="menu-list">
<li class="menu-item">Photography</li>
<li class="menu-item">Cooking</li>
<li class="menu-item has-submenu">
Games
<ul class="submenu">
<li>Board Games</li>
<li>Card Games</li>
<li>Video Games</li>
</ul>
</li>
<li class="menu-item">Drawing</li>
<li class="menu-item">Music</li>
</ul>
</nav>
<div class="menu-controls">
<input type="text" class="search" placeholder="Search activities..." />
<button class="cta-button">Join a Club!</button>
</div>
<div class="info-section">
<p class="intro">Welcome to the Hobby Club community!</p>
<p>Joining a hobby club is a great way to meet people who share your interests.</p>
<p>You can learn new skills, have fun, and even discover talents you didn’t know you had!</p>
</div>
</section>
</body>
</html>
Semua pelajaran di Menguasai CSS
1Menguasai Selector, Kombinasi
PengantarSelector KeturunanSelector AnakSelector Saudara SebelahSelector Saudara UmumTantangan Rangkuman7Membangun dengan CSS Grid
Dasar-Dasar GridPenempatan Item dengan grid-rowArea BernamaTantangan RangkumanLatihan sendiri: Playground Web