Dropdown Menu with Fixed Navbar

1

I am having trouble getting my dropdown list for the ‘about’ button to work when I use a fixed navbar. I think it might have to do with the position: absolute and position: fixed.

  1. Using fixed navbar disables my dropdown functionality.
  2. Using non-fixed navbar makes it so I have margins around it even though I’m using width: 100%, so it doesn’t look or behave like a navbar.
  3. Using position: absolute on my navbar makes it so the whole navbar extends in height with the expanding dropdown list.

Why are these things happening and what do I need to understand to prevent such behavior.

I can’t post my code pen here it says im too new.

2 

body{
	background-image: url("images/background.jpg");
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.navbar{


		width: 100%;
		overflow: hidden; /*Make sure the content that does not fit on the screen is hidden*/

		background-color: rgba(112, 87, 23, 0.19); 
		opacity 0.5;
		font-family: Arial;
}


/*Links inside the navbar*/
.navbar a{

	float: left;
	font-size: 16px;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;

}

/*Dropdown container*/
.dropdown{
	float: left;
	overflow: hidden;
}

/*Dropdown button*/
.dropdown .dropbtn{
	font-size: 16px;
	border: none;
	outline: none;	
	color: white;
	padding: 14px 16px;
	background-color: inherit;
	font-family: inherit;
	margin: 0;
}

/*red hover color*/
.navbar a:hover, .dropdown:hover .dropbtn{
	background-color: rgba(112, 87, 23, 0.45);
}

/*Dropdown content (hidden by default)*/
.dropdown-content{
	display: none; 
	position: absolute;
	background-color: rgba(112, 87, 23, 0.19);
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

/*Dropdown links*/
.dropdown-content a{
	float: none;
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;

}

/*add grey background to links on hover*/
.dropdowncontent a:hover{
	background-color: rgba(112, 87, 23, 0.45);

}

.dropdown:hover .dropdown-content{
	display:block;
}

<!doctype HTML>

<title>Test</title>
Home Gallery Collaborate 
		<div class="dropdown">
			<button class="dropbtn">About</button>

			<div class="dropdown-content">
				<a href="#contact">Contact Info</a>
				<a href="#mission">History and Mission Statement</a>
			</div>
	</div>

</div>
``` type or paste code here ```