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;   }}

css html javascript

@darmawan17

2 Kontribusi 0 Poin

Diperbarui 2 tahun yang lalu

1 Jawaban:

<div>coba ke sini deh,,, mungkin bisa membantu<br>https://stackoverflow.com/questions/57793694/making-navbar-sticky-makes-dropdown-content-dissapear</div>

@yukari06

137 Kontribusi 66 Poin

Dipost 2 tahun yang lalu

Kelas Premium! Belajar bikin website dari nol sekarang

Sticky Navbar dengan dropdown menu tidak muncul

Kelas Premium!
Belajar bikin website dari nol sekarang