Dropdown Menu Scrolling Issue - css

Question

This is my first time trying to build a website from scratch, so my apologies if I've done everything wrong; I am open to any advice, though. My main issue right now is that the navigation bar is scrolling within itself instead of down in front of the background image. It used to look perfect until I added the floating/fixed attribute.
It's not a huge deal, but it would also be nice if the dropdown boxes were centered instead in line with the left side of the box. This is what I want it to look like: http://www.palousebicycle.org/ and here is the code for what I have now:
<header>
<style>
#nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
background-color: #333;
text-align: center;
position: fixed;
top: 0;
width: 100%;
font-family: Ubuntu;
font-size: .75em;
display: block;
}
li {
text-align: center;
display: inline-block;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #333;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
position: absolute;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: #222;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #333
}
.dropdown:hover .dropdown-content {
display: block;
}
a:link {
color: white;
}
a:visited {
color: white;
}
a:hover {
color: gray;
}
a:active {
color: whitesmoke;
}
</style>
<font face="Ubuntu" color="white">
<nav align="center">
<ul id="nav">
<li>Home</li>
<li class="dropdown">
Services
<div class="dropdown-content">
Memberships
Repairs
</div>
<li>Our Work</li>
<li class="dropdown">
About Us
<div class="dropdown-content">
Our Team
Board of Directors
</div>
<li>Contact</li>
<li>Donate</li>
</ul>
</nav>
</header>
I'm very appreciative of your time! Thank you for any response or suggestions.

Answer 1

EDIT: Also updated this demo to center the dropdown menus (positional and text) per your example, and made comments in the CSS so you can see where the changes were made.
Remove overflow: auto on #nav to let the dropdowns extend outside of the nav bar. Live demo:
#nav {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
text-align: center;
position: fixed;
top: 0;
width: 100%;
font-family: Ubuntu;
font-size: .75em;
display: block;
}
li {
text-align: center;
display: inline-block;
/* center dropdowns */
position: relative;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #333;
}
li.dropdown {
display: inline-block;
}
li.dropdown:hover .dropdown-content {
/* show dropdown */
display: block;
}
.dropdown-content {
position: absolute;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
/* center dropdowns */
left: 50%;
transform: translateX(-50%);
/* hide dropdown */
display: none;
}
.dropdown-content a {
color: #222;
padding: 12px 16px;
text-decoration: none;
display: block;
/* center dropdowns */
text-align: center;
}
.dropdown-content a:hover {
background-color: #333
}
.dropdown:hover .dropdown-content {
display: block;
}
a:link {
color: white;
}
a:visited {
color: white;
}
a:hover {
color: gray;
}
a:active {
color: whitesmoke;
}
<nav align="center">
<ul id="nav">
<li>Home
</li>
<li class="dropdown"> Services
<div class="dropdown-content"> Memberships Repairs
</div>
<li>Our Work
</li>
<li class="dropdown"> About Us
<div class="dropdown-content"> Our Team Board of Directors
</div>
<li>Contact
</li>
<li>Donate
</li>
</ul>
</nav>

Answer 2

Don't use overflow: auto property on #nav. This is responsible for internal scrolling. Instead give these additional styles:
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
top: 40px;
}
.dropdown:hover > .dropdown-content {
display: block;
}
Have a look at the working snippet below:
#nav {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
text-align: center;
position: fixed;
top: 0;
width: 100%;
font-family: Ubuntu;
font-size: .75em;
display: block;
}
li {
text-align: center;
display: inline-block;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #333;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
position: absolute;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: #222;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #333
}
.dropdown:hover .dropdown-content {
display: block;
}
a:link {
color: white;
}
a:visited {
color: white;
}
a:hover {
color: gray;
}
a:active {
color: whitesmoke;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
top: 40px;
left: 50%;
transform: translateX(-50%);
}
.dropdown-content a {
text-align: center;
}
.dropdown:hover > .dropdown-content {
display: block;
}
body {
margin: 0;
}
<header>
<font face="Ubuntu" color="white">
<nav align="center">
<ul id="nav">
<li>Home</li>
<li class="dropdown">
Services
<div class="dropdown-content">
Memberships
Repairs
</div>
</li>
<li>Our Work</li>
<li class="dropdown">
About Us
<div class="dropdown-content">
Our Team
Board of Directors
</div>
</li>
<li>Contact</li>
<li>Donate</li>
</ul>
</nav>
</header>
Hope this helps!