Issue with button dropdown - html

Question

I'm pretty new to web coding, but working currently on a small project for a community of mine, where I try to create a small simple website with basic information.
My issue here is I can't get to work with my dropdown menu, it wont show on hove over or show my dropdown menu, but once I remove button my dropdown menu will work proberly.
body {
font-family: Arial;
}
/* used # is id="" under html code */
/* used . is class="" under html code */
/* Change value inside #navbar, will change style on main menu */
#navbar {
overflow: hidden;
position: fixed;
list-style-type: none;
top: 0;
width: 100%;
text-align: center;
text-transform: uppercase;
font-weight: bold;
}
#navbar a {
float: left;
display: block;
color: #732119;
text-align: center;
padding: 10px 10px;
text-decoration: none;
font-size: 12px;
}
#navbar a:hover {
background: #F2CDA0;
color: #732119;
opacity: 0.7;
}
/* Change value inside navdown, will change style on Dropdown menu */
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
border: 0;
outline: 0;
padding: 10px 10px;
background-color: inherit;
color: #732119;
}
.dropdown-content {
display: none;
position: absolute;
background-color: inherit;
min-width: 140px;
z-index: 1;
}
.dropdown-content a {
float: none;
color: #732119;
padding: 10px 10px;
text-decoration: none;
display: block;
text-align: center;
}
.dropdown-content a:hover .dropbtn {
background: #F2CDA0;
color: #732119;
}
/* Change value inside this, will change logo on the site */
#img_center {
display: block;
margin-right: auto;
margin-left: auto;
}
/* Center everything on the side inside <table> */
#table_main {
margin-left: auto;
margin-right: auto;
}
/* Footer style, customize footer bar here */
#footer {
position: fixed;
text-transform: uppercase;
text-align: center;
font-size: 12px;
font-weight: bold;
color: black;
left: 0;
bottom: 0;
width: 100%;
}
#h2_headertext {
font-size: 16px;
text-transform: uppercase;
}
<table id="table_main">
<tr>
<td>
<!-- Main Menu -->
<ul id="navbar">
<li>Forside</li>
<li>Bliv Medlem</li>
<li>Medlemsfordele</li>
<!-- Dropdown Menu -->
<div class="dropdown">
<button class="dropbtn">Information</button>
<div class="dropdown-content">
Vedtægter
Regler
Hvem er vi
Bestyrelsen
</div>
</div>
<li><a class="active" href="#kontakt">Kontakt</a></li>
</ul>
<!--Center picture of the side -->
<div id="img_center">
<img src="images/logo.png" alt="">
<h2 id="h2_headertext">Velkommen</h2>
</div>
</td>
</tr>
</table>
<div id="footer">
<p>Copyright 2022</p>
</div>

Answer 1

Please study the following model code carefully. It shows the principle of a dropdown menu on CSS . There is literally nothing there. Learn to understand how it works.
ul,
li {
list-style: none;
padding: 0;
}
.submenu {
display: none;
}
.item:hover>.submenu {
display: block;
}
<ul class="menu">
<li class="item">
Hover me!
<ul class="submenu">
<li class="subitem">subitem1</li>
<li class="subitem">subitem2</li>
<li class="subitem">subitem3</li>
</ul>
</li>
</ul>