Attempting to hide drop down menu with img-dropdown-content but it's not working, possibly being overridden by another element - only using html and css
I have experimented with visibility: hidden; both with and without !important as well as display: none; with !important in an effort to override any potential attributes set in the html code, but unfortunately, none of these methods proved successful. Please keep in mind that I am still new to coding in html and css, so please forgive any formatting errors :). Also, this is not intended to be a fully functional public webpage; rather, it is simply running locally on my personal Windows PC using python -m http.server in the Windows PowerShell for testing purposes and to gain some experience in website design.
.dropbtn {
border: black 1px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
position: absolute;
display: none !important;
visibility: hidden !important;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}<header>
<h1 style='font-family:Coda;' class='title'>Content Distributor</h1>
</header>
<body>
<div class="dropdown">
<button class="dropbtn"><img src=images/menu.ico></button>
<div class="dropdown-content">
<a href="stores.html">Stores</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<!-- <a href='stores.html' class='button'><button type="button" class="button">Stores</button></a> -->