Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
Sticky Navbar dengan dropdown menu tidak muncul
saya membuat sticky navbar dengan dropdown menu, tapi kenpa tidak muncul ya?? sudah cari jalan keluar tapi ngeblank.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="styles/style.css"></head><body> <header> <div class="jumbotron"> <h1>Bandung</h1> <p>Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu kota provinsi tersebut.</p> </div> <nav> <a href="#sejarah">Sejarah</a> <a href="#geografis">Geografis</a> <div class="dropdown"> <button class="dropbtn">Wisata <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link1</a> <a href="#">Link2</a> <a href="#">Link3</a> </div> </div> </nav> </header> </body></html>
css nya :
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap');
* { box-sizing: border-box;}html{ scroll-behavior: smooth;}body { font-family: 'Quicksand', sans-serif; margin: 0; padding: 0;}main { padding: 20px; overflow: auto; }header { display: inline;}nav { background-color: #00a2c6; padding: 10px; position: sticky; top: 0; overflow: hidden;}
.jumbotron { font-size: 20px; padding: 60px; background-color: #00c8eb; text-align: center; color: white;}
.profile header { text-align: center;}.featured-image { width: 100%; max-height: 300px; object-fit: cover; object-position: center;}.profile img { width: 200px;}.card { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); border-radius: 5px; padding: 20px; margin-top: 20px;} h2 { color: #00a2c6; } h3 { color: #00a2c6; } aside { float: right; width: 25%; padding-left: 20px;} footer { padding: 20px; color: white; background-color: #00a2c6; text-align: center; font-weight: bold; } #content { float: left; width: 75%;}
nav a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } nav a:hover, .dropdown:hover .dropbtn { background-color: red; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #ddd; } .dropdown:hover .dropdown-content { display: block; }
@media screen and (max-width: 1000px) { #content, aside { width: 100%; padding: 0; }}
0
1 Jawaban:
<div>coba ke sini deh,,, mungkin bisa membantu<br>https://stackoverflow.com/questions/57793694/making-navbar-sticky-makes-dropdown-content-dissapear</div>
0
