Dropdown nav menu not showing - html

Question

So first I would like to say I am extremely new to coding so please keep that in mind!
I was trying to create a dropdown nav bar and I'm having all sorts of issues. First, between the dropdown menu items there is white spaces which I don't understand at all. Second, the actual dropdown portion is not showing up at all when mousing over. I've been trying to fix this for an incredibly long time and I cannot figure out what the problem is.
The website with the issue is: (Dropdown is all the way at the bottom of the page)
https://ist2w.purdueglobal.edu/2204A/IT214-01/MeganAllen5/navigation.html
Here is the html code:
HTML CODE
And the css:
#drop_nav {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#drop_nav ul {
list-style-type: none;
width: 100%;
display: flex;
margins: 0px;
padding: 0px;
}
#drop_nav li {
position: relative;
width: 100%
align-items: center;
}
#drop_nav a {
color: #ffffff;
background-color: #000000;
height: 64px;
font-family: Arial, Helvetica, sans-serif;
text-weight: 500;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
transition: width .4s, height .4s;
}
#drop_nav a:hover {
width: 80px;
height: 75px;
background-color: #dc143c;
}
#drop_nav li:hover .submenu > li {
display: block;
top: 0px;
}
.submenu {
}
.submenu li:hover {
display: block;
top: 0px;
}
#drop_nav li:hover .submenu > li {
display: block;
top: 0px;
}
.submenu li {
display: none;
position: absolute;
top: 0px;
}
.submenu {
display: flex;
flex-direction: vertical;
position: relative;
width: 100%;
}
.submenu li {
position: absolute;
}
.submenu li:hover {
display: flex;
}
.arrow {
margin-left: 8px;
color: #a9a9a9
font-size: 12px;
}
PLEASE HELP!!!!!
Thank you so much.

Answer 1

Here's an example: CodePen.
In this example I only illustrate how the hovering and opening of the menus works. I didn't use any other styling. Note that the <li>.....</li> encapsulates the menus completely.
This is all the styling that is needed to open and close the menus:
#drop_nav ul li ul {
display: none;
}
#drop_nav ul li:hover ul {
display: initial;
}