Having some trouble getting my dropdown menu to display properly on hover; it's currently displaying all on one line and also appears not to be overlaying, despite z-index being set to 1. Played around with making projects a p, a, and div but still stumped. Any advice?
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<nav class="navbar">
Name
<div class="dropdown">
<a>Projects</a>
<div class="dropdown-content">
Project 1
Project 2
Project 3
</div>
</div>
About
Contact
</nav>
</body>
</html>
CSS
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
letter-spacing: .015em;
color: #000000;
}
a:link, a:visited {
color: #000000;
text-decoration: none;
}
a:hover, a:active {
color: #a9c4d4;
text-decoration: underline;
}
.navbar {
overflow: hidden;
font-size: 2.5em;
font-weight: 700;
position: fixed;
top: 0;
width: 100%;
list-style-type: none;
margin: 0px 0px 0px 110px;
padding: 10px 0px 10px 0px;
background-color: #ffffff;
}
.navbar a {
float: left;
display: block;
margin: 10px;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ffffff;
z-index: 1;
}
.dropdown-content a {
float: none;
margin: 10px;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}
#name-link {
color: #a9c4d4;
text-decoration: none;
}
a.selected-link {
text-decoration: underline;
}
jsfiddle here: https://jsfiddle.net/29gev50b/2/
change the css of "dropdown-content". The position absolute does that thing. remove this position absolute css from "dropdown-content" and it will work fine.
You did not leave enough room in your navbar div container for the expansion of the menu which is why it gets cut off. z-index won't work because the box (div) isn't large enough.
Add min-height: 100px; to your navbar to fix.
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
letter-spacing: .015em;
color: #000000;
}
a:link,
a:visited {
color: #000000;
text-decoration: none;
}
a:hover,
a:active {
color: #a9c4d4;
text-decoration: underline;
}
.navbar {
overflow: hidden;
font-size: 2.5em;
font-weight: 700;
position: fixed;
top: 0;
width: 100%;
list-style-type: none;
margin: 0px 0px 0px 110px;
padding: 10px 0px 10px 0px;
min-height: 100px;
background-color: #ffffff;
}
.navbar a {
float: left;
display: block;
margin: 10px;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ffffff;
z-index: 1;
}
.dropdown-content a {
float: none;
margin: 10px;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}
#name-link {
color: #a9c4d4;
text-decoration: none;
}
a.selected-link {
text-decoration: underline;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<nav class="navbar">
Name
<div class="dropdown">
<a>Projects</a>
<div class="dropdown-content">
Project 1
Project 2
Project 3
</div>
</div>
About
Contact
</nav>
</body>
</html>
Related
I am working on a website and I'm currently optimizing for portrait mode devices. I want to have a fixed navbar on the top of the page so that no matter where you are, you can click one of the navigation buttons. But for some reason, the navbar keeps leaving the div that it is in. I can't figure out where in my code I'm messing up or what I might be missing. I've tried limiting the width percentage, using overflow:hidden, and even specifying things in the li. The navbar doesn't leave the div if I leave the position at default (static) or use position: sticky.
/* Phone Styles */
body {
color: #7a503c;
background-color: #bd7d3b;
background-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/34a8808d-f7f3-40c0-bfb4-e0928a5dabde/d3991v1-c838c361-483b-4d3e-8ee7-94f135191afc.jpg/v1/fill/w_900,h_900,q_75,strp/seamless_wood_planks_texture_by_10ravens_d3991v1-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3siaGVpZ2h0IjoiPD05MDAiLCJwYXRoIjoiXC9mXC8zNGE4ODA4ZC1mN2YzLTQwYzAtYmZiNC1lMDkyOGE1ZGFiZGVcL2QzOTkxdjEtYzgzOGMzNjEtNDgzYi00ZDNlLThlZTctOTRmMTM1MTkxYWZjLmpwZyIsIndpZHRoIjoiPD05MDAifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.FNq13s8fPuiMiCTzg2YdIKZqYHU_E3LYzIL6LTVXX6s");
padding: 20px;
font-family: 'Raleway', 'Hind Siliguri', sans-serif;
}
/* MAIN BODY */
div {
background-color: #fff;
width: 90%;
margin: 0 auto;
margin-top: -30px;
padding: 1.25em;
border: 1px solid #000;
}
header h1 {
font-family: 'Berkshire Swash', 'Galada', 'Merienda One', cursive;
text-align: center;
color: #7a503c;
margin: auto;
margin-top: 0px;
margin-bottom: 20px;
font-size: 300%;
text-shadow: 1px 1px #000;
}
section h4 {
font-size: 30px;
}
section a:link,
a:visited {
color: #7a503c;
text-decoration: none;
}
section a:hover,
a:active {
color: #7a503c;
text-decoration: underline;
}
div.sectionlinks a:link,
div.sectionlinks a:visited {
color: #7a503c;
text-decoration: none;
}
div.sectionlinks a:hover,
div.sectionlinks a:active {
color: #7a503c;
text-decoration: underline;
}
div.sectionlinks {
margin: 0;
border: none;
padding: 0;
}
/*NAVIGATION*/
#navbar {
background-color: #af0000;
font-family: 'Playfair Display', 'Merriweather', 'Libre Baskerville', serif;
top: 0;
position: fixed;
width: 100%;
margin: 0 -1.25em;
overflow: hidden;
border-bottom: 1px solid #000;
}
#navbar ul {}
#navbar li {
display: inline-block;
padding: 0.0625em 0.3125em;
font-size: 1.25em;
}
#navbar a {
text-decoration: none;
color: #dca56;
}
#navbar a:link {
color: #dca56d;
}
#navbar a:visited {
color: #dca56d;
}
#navbar a:hover {
color: #dca56d;
font-weight: bold;
}
#navbar a:active {
color: #dca56d;
font-weight: bold;
}
img {
width: 100%;
border: 1Spx solid #000;
margin-top: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cooking Website</title>
<link rel="stylesheet" type="text/css" href="help.css">
<link href="https://fonts.googleapis.com/css2?family=Berkshire+Swash&family=Galada&family=Merienda+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri&family=PT+Mono&family=Raleway&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&family=Merriweather:wght#300&family=Playfair+Display&display=swap" rel="stylesheet">
</head>
<div>
<body>
<header>
<h1>Cooking Website</h1>
</header>
<nav id="navbar">
<ul>
<li>Home</li>
<li>Appetizers</li>
<li>Main Dishes</li>
<li>Sides</li>
<li>Desserts</li>
<li>Snacks</li>
<li>Drinks</li>
</ul>
</nav>
<section>
<img src="https://www.solidbackgrounds.com/images/2560x1440/2560x1440-davys-grey-solid-color-background.jpg" alt="cooking image">
<div class="sectionlinks">
<h4>Quick Mix</h4>
<h4>Measurement Conversions</h4>
<h4>Ingredients</h4>
</div>
</section>
</body>
</div>
</html>
If you don't need your nav to be expanded for full width you can try:
#navbar {
background-color: #af0000;
font-family: 'Playfair Display', 'Merriweather', 'Libre Baskerville', serif;
top: 0;
position: sticky;
width: calc(100% + 2.5em);
left: 0;
padding: 0;
margin: -1.25em -1.25em 1.25em -1.25em;
overflow: hidden;
border-bottom: 1px solid #000;
}
In case you need full width nav bar on top
#navbar {
background-color: #af0000;
font-family: 'Playfair Display', 'Merriweather', 'Libre Baskerville', serif;
top: 0;
position: fixed;
width: 100%;
left: 0;
padding: 0;
overflow: hidden;
border-bottom: 1px solid #000;
}
I have tried to follow this tutorial, but I can't seem to find out why the dropdown menu won't show up at all when hovering over the dropdown button in the nav bar.
This is the HTML part of the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
</head>
<body>
<div id="main-container">
<div id="navbar" class="navbar">
New
Sales
Account
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>
</body>
</html>
This is the CSS part of the code:
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
font-family: "Poppins", sans-serif;
background-color: #00ff00;
}
#main-container {
padding: 16px;
margin-top: 30px;
}
#navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 30px;
z-index: 9999;
}
#navbar a.active {
text-decoration: underline;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.new_sale {
background-color: green;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
The problem is that you are hiding the content which goes over the boundaries of your navbar and dropdown.
You need to remove
overflow: hidden;
from your #navbar and .dropdown class, check this fiddle
The css hover drop down worked perfectly on fresh page, but it is not working when pasted on html page which is linked with bootstrap (I hided other css pages so I found bootstrap causing the problem!)
So using devtool I hided 'position:absolute' from 'dropdown-contents' which is working but the below container jumping downward:http://prntscr.com/lu7frm
Here is the code:
.navbar {
overflow: hidden;
/* background-color: #333;*/
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: right;
font-size: 16px;
color: #060606;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: #060606;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
color:#4389dc;
transition:.3s ease-out;
}
.dropdown-contents {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-contents a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-contents a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-contents {
display: block;
}
/*navbar*/
#slapper {
min-height: 2%;
height: auto !important;
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container" style="padding:0px;">
<div class="navbar">
For Professionals
Tax News
Ask a Question
Find an Accountant
<div class="dropdown">
<button class="dropbtn">Learn About Taxes
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-contents">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
You need to remove the overflow:hidden from you code (.navbar and .dropdown) to be able to see the dropdown. You no more need them to clear the float as bootstrap is already doing this.
.navbar {
font-family: Arial, Helvetica, sans-serif;
border-color:#000!important; /*to show that the height is good*/
}
.navbar a {
float: right;
font-size: 16px;
color: #060606;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: right;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: #060606;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
color:#4389dc;
transition:.3s ease-out;
}
.dropdown-contents {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-contents a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-contents a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-contents {
display: block;
}
/*navbar*/
#slapper {
min-height: 2%;
height: auto !important;
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container" style="padding:0px;">
<div class="navbar">
For Professionals
Tax News
Ask a Question
Find an Accountant
<div class="dropdown">
<button class="dropbtn">Learn About Taxes
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-contents">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
I am creating a webpage in which when I hover over the .Soccer section, it will dropdown and show Link1, Link2, Link3.
Without the position: fixed;, the code works perfectly fine.
As I want the heading in top of the webpage, I put position: fixed;
But as soon as I put that on, the dropdown button for "Soccer" does not work.
html {
background-image: url("Images/BackgroundImageI.jpg");
background-repeat: no-repeat;
}
body {
background-color: White;
color: Black;
margin-left: 0%;
margin-right: 0%;
margin-top: 40%;
margin-bottom: 0%;
border: 10px outset Gray;
}
h1 {
font-family: Arial, Verdana, Geneva, sans-serrif;
color: teal;
text-align: center;
}
p {
font-family: Arial, Verdana, Geneva, sans-serrif, serrif;
font-size: 12px;
font-style: normal;
font-weight: normal;
line-height: 24px;
}
ul {
margin-left: 0%;
margin-right: 0%;
margin-top: 0%;
list-style-type: none;
margin: 0;
padding: 0;
top: 0;
width: 100%;
overflow: hidden;
background-color: #333;
position: fixed;
/* Removing this makes the dropdown work */
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.Soccer:hover .dropbtn {
background-color: teal;
}
li.Soccer {
display: inline-block;
}
.Soccer-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.Soccer-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.Soccer-content a:hover {
background-color: teal
}
.Soccer:hover .Soccer-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="testeditor.css" type="text/css">
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li class="Soccer">
Soccer
<div class="Soccer-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<h3>Soccer Menu inside a Navigation Bar</h3>
<p>Hover over the "Soccer" link to see the Soccer menu.</p>
</body>
</html>
Please ask me if you do not understand the concept of what I am trying to do. And if you do understand, please help me.
This is my first post so it might be a bit off compared to other posts.
You had a overflow: hidden on your ul element. Therefore the dropdown wasn't shown. Removing it makes the dropdown appear again.
html {
background-image: url("Images/BackgroundImageI.jpg");
background-repeat: no-repeat;
}
body {
background-color: White;
color: Black;
margin-left: 0%;
margin-right: 0%;
margin-top: 40%;
margin-bottom: 0%;
border: 10px outset Gray;
}
h1 {
font-family: Arial, Verdana, Geneva, sans-serrif;
color: teal;
text-align: center;
}
p {
font-family: Arial, Verdana, Geneva, sans-serrif, serrif;
font-size: 12px;
font-style: normal;
font-weight: normal;
line-height: 24px;
}
ul {
margin-left: 0%;
margin-right: 0%;
margin-top: 0%;
list-style-type: none;
margin: 0;
padding: 0;
top: 0;
width: 100%;
background-color: #333;
position: fixed;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.Soccer:hover .dropbtn {
background-color: teal;
}
li.Soccer {
display: inline-block;
}
.Soccer-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.Soccer-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.Soccer-content a:hover {
background-color: teal
}
.Soccer:hover .Soccer-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="testeditor.css" type="text/css">
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li class="Soccer">
Soccer
<div class="Soccer-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<h3>Soccer Menu inside a Navigation Bar</h3>
<p>Hover over the "Soccer" link to see the Soccer menu.</p>
</body>
</html>
Just change the position of .Soccer-content to fixed, too
html{
background-image: url("Images/BackgroundImageI.jpg");
background-repeat: no-repeat;
}
body {
background-color: White;
color: Black;
margin-left: 0%;
margin-right: 0%;
margin-top: 40%;
margin-bottom: 0%;
border: 10px outset Gray;
}
h1 {
font-family: Arial, Verdana, Geneva, sans-serrif;
color: teal;
text-align: center;
}
p {
font-family: Arial, Verdana, Geneva, sans-serrif, serrif;
font-size: 12px;
font-style: normal;
font-weight: normal;
line-height: 24px;
}
ul {
margin-left: 0%;
margin-right: 0%;
margin-top: 0%;
list-style-type: none;
margin: 0;
padding: 0;
top: 0;
width: 100%;
overflow: hidden;
background-color: #333;
position: fixed;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .Soccer:hover .dropbtn {
background-color: teal;
}
li.Soccer {
display: inline-block;
}
.Soccer-content {
display: none;
position: fixed;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.Soccer-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.Soccer-content a:hover {background-color: teal}
.Soccer:hover .Soccer-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="testeditor.css" type="text/css">
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li class="Soccer">
Soccer
<div class="Soccer-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<h3>Soccer Menu inside a Navigation Bar</h3>
<p>Hover over the "Soccer" link to see the Soccer menu.</p>
</body>
</html>
my sad navbar here I can't get my navbar to display horizontally and have tried messing with float, position, and display:inline-block. It is in an ul format and has 3 buttons in the middle with dropdown menus. Please let me know if you see what I am doing wrong and thank you!
/* NAVIGATION BAR */
#nav {
width: 1100px;
height: 200px;
float: left;
font-weight: bold;
font-size: 24px;
float: left;
}
# nav button {
display: inline-block;
position: relative;
width: 100%;
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%
background-color: white;
color: rgb(36,60,131);
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
display: inline-block;
}
li {
float: left;
}
/* nav bar hover */
li a {
display: inline-block;
color: #000;c
text-align: center;
padding: 8px 16px;
background-color: white;
color: rgb(36,60,131);
text-decoration: none;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
float: left;
border-left: 1px solid #bbb;
border-right: 1px solid #bbb;
}
/* changes link color on hover */
li a:hover, .dropdown:hover .dropbtn {
background-color: rgb(36,60,131);
color: white;
}
/* highlights active page on nav bar */
.active {
background-color: rgb(36,60,131);
color: white;
}
li.dropdown {
display: inline-block;
}
/* dropdown menu */
.dropbtn {
display: inline-block;
background-color: white;
text-align: center;
padding: 8px 16px;
color: rgb(36,60,131);
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
text-decoration: none;
font-size: 24px;
border: none;
font-weight: bold;
border-left: 1px solid #bbb;
border-right: 1px solid #bbb;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgb(36,60,131);
color: white;
min-width: 160px;
}
.dropdown-content a {
padding: 8px 16px;
background-color: white;
color: rgb(36,60,131);
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: rgb(36,60,131);
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
and my HTML is here
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="css/saferide.css">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>
<div id="nav">
<ul>
<li style="float:left">home</li>
<div class="dropdown">
<button class="dropbtn">about us</button>
<div class="dropdown-content">
safe ride history
meet our dispatchers
core staff
</div>
</div>
<div class="dropdown">
<button class="dropbtn">how we operate</button>
<div class="dropdown-content">
rules & policies
how to schedule a ride
safe ride boundaries
</div>
</div>
<div class="dropdown">
<button class="dropbtn">get involved</button>
<div class="dropdown-content">
volunteer or intern
resources
</div>
</div>
<li>contact us</li>
</ul>
</div>
Here you go: https://jsfiddle.net/2uj2u5g5/
You forgot to add a ; to one of the width:100% and therefore the CSS was not working correctly. You also did li.dropdown while your dropdown classes are not within the li, so that didn't work either. I would highly suggest that you add more structure to your navigation panel and keep the HTML standards in mind. Please follow some well known articles like this one: http://www.w3schools.com/css/css_navbar.asp.
Good luck.