Creating a Dropdown Menu with CSS Not Working - html

Question

The dropdown menu (sub) does not appear right below the element it is supposed to when I hover on the navbar. How can I get it to appear below it instead of to the right of it? Also, how can I get the extra spacing on the left side of each menu to disappear? I tried setting the padding to 0, but that did not change anything.
a {
text-decoration: none;
color: #000;
}
.navbar {
background-color: #f2f2f2;
position: fixed;
top: 0;
width: 100%;
text-align: center;
font-family: "Raleway";
font-size: 93%;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
left: 0;
}
.navbar > li{
display:inline-block;
}
.navbar li {
list-style-type: none;
padding-left: none;
}
.navbar a {
float: center;
display:inline-block;
color: #000000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover {
background-color: #ddd;
}
.navbar li:hover ul.sub {
display: inline-block;
}
.dropdown {
position: relative;
display: inline-block;
}
ul.sub {
padding-left: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
ul.sub a {
color: #000000;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
<ul class = "navbar">
<!--add dropdown menu links for everything except collaboration-->
<li class = "dropdown">
<li>About FRES(H)
<ul class = "sub">
<li>Safety</li>
<li>Sense</li>
<li>Express</li>
<li>Keep Fresh</li>
<li>Notebook</li>
<li>Interlab</li>
<li>Protocols</li>
</ul>
</li>
</li>
<li class = "dropdown">
<li>Models
<ul class = "sub">
<li>Protein Modelling Etnr1</li>
<li>Protein Modelling Etnr2</li>
<li>Internal Cellular Model</li>
<li>Macroscopic Diffusion Model</li>
</ul>
</li>
</li>
<li class = "dropdown">
<li>Technology
<ul class = "sub">
<li>Primer Design App</li>
<li>SmartPhone App</li>
</ul>
</li>
</li>
<li class = "dropdown">
<li>Human-Centered Design
<ul class = "sub">
<li>Integrated Human Practices</li>
<li>Outreach</li>
<li>Theory of Knowledge</li>
</ul>
</li>
</li>
<li>Engagement</li>
<li class = "dropdown">
<li>Meet the Team
<ul class = "sub">
<li>About Us</li>
<li>Attributions</li>
</ul>
</li>
</li>
<li class = "dropdown">
<li>Awards
<ul class = "sub">
<li>Parts</li>
<li>Medals</li>
</ul>
</li>
</li>
</ul>

Answer 1

You were almost there! You just added the :hover to the wrong div.
Make the following changes:
display:none to ul.sub and .navbar li:hover ul.sub instead of .navbar:hover ul.sub
UPDATE: to centre the ul.sub, use display: block. To remove padding, assign value of 0, instead of 'none'. See example below:
a {
text-decoration: none;
color: #000;
}
.navbar {
background-color: #f2f2f2;
position: fixed;
top: 0;
width: 100%;
text-align: center;
font-family: "Raleway";
font-size: 93%;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
left: 0;
}
.navbar > li{
display:inline-block;
}
.navbar li {
list-style-type: none;
padding-left: none;
}
.navbar a {
float: center;
display:inline-block;
color: #000000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover {
background-color: #ddd;
}
.navbar li:hover ul.sub {
display: block;
}
.dropdown {
position: relative;
display: inline-block;
}
ul.sub {
padding-left: 0;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
display:none;
}
ul.sub a {
color: #000000;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
<ul class = "navbar">
<!--add dropdown menu links for everything except collaboration-->
<li class = "dropdown">
<li>About FRES(H)
<ul class = "sub">
<li>Safety</li>
<li>Sense</li>
<li>Express</li>
<li>Keep Fresh</li>
<li>Notebook</li>
<li>Interlab</li>
<li>Protocols</li>
</ul>
</li>
</li>
<li class = "dropdown">
<li>Models
<ul class = "sub">
<li>Protein Modelling Etnr1</li>
<li>Protein Modelling Etnr2</li>
<li>Internal Cellular Model</li>
<li>Macroscopic Diffusion Model</li>
</ul>
</li>
</li>
<li class = "dropdown">
<li>Technology
<ul class = "sub">
<li>Primer Design App</li>
<li>SmartPhone App</li>
</ul>
</li>
</li>
<li class = "dropdown">
<li>Human-Centered Design
<ul class = "sub">
<li>Integrated Human Practices</li>
<li>Outreach</li>
<li>Theory of Knowledge</li>
</ul>
</li>
</li>
<li>Engagement</li>
<li class = "dropdown">
<li>Meet the Team
<ul class = "sub">
<li>About Us</li>
<li>Attributions</li>
</ul>
</li>
</li>
<li class = "dropdown">
<li>Awards
<ul class = "sub">
<li>Parts</li>
<li>Medals</li>
</ul>
</li>
</li>
</ul>