Navigation Drop-Down Menu not working Properly - html

Question

I am trying to create one link, Buying Tips, in my navigation menu as a drop down menu. I am running into a few problems and nothing I do seems to fix these issues.
For some reason when I scroll over Buying Tips, the first option of my drop down menu overlaps the navigation menu. I am not sure why this is happening and how to correct this.
I would like the drop down arrow to show but not sure how to code this in CSS.
I would like the navigation links to be equally spaced out and Buying Tips is all on one line. (please view image to see problem) I tried changing the width of the navbar and change the font sizes of navigation links but that does not help.
Printscreen of navigation issues on webpage
.navbar {
width: 100%;
background-color: black;
overflow: auto;
}
.navbar a {
float: left;
padding: 5px;
color: white;
text-align: center;
text-decoration: none;
font-size: 20px;
width: 24%;
}
.navbar a:hover {
color: #FFA500
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .BuyTip {
float: left;
color: white;
text-align: center;
text-decoration: none;
font-size: 20px;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 200px;
}
.dropdown-content a {
float: none;
color: black;
display: block;
text-align: left;
font-size: 10px;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 480px) {
.navbar a {
float: none;
display: block;
width: 100%;
}
}
<div class="navbar">
Chade's Bicycle Company
<div class="dropdown">
<a class="BuyTip">Buying Tips</a>
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Choosing The Correct Bike
Setting A Budget
Test-Ride Before Buying
Choosing The Correct Size
The Essential Accessories
</div>
</div>
Company Calendar
Contact Us
</div>

Answer 1

I've changed your code to achieve the desired result.
As for the questions you've asked:
Since you've made the element bearing the .dropdown class absolutely positioned it will stick to the top since it has no relative parent.
I've used a CSS border property to create an arrow. You can customize it as you wish. (even replace it with the caret class you've used originally, as long as you position it appropriately.)
You can control the spacing between the navigation links using CSS margin or padding properties. read-more about padding and margin.
.navbar {
width: 100%;
background-color: black;
overflow: auto;
font-size: 0;
}
.navbar li {
display: inline-block;
margin: 0 10px;
}
.navbar li a {
display: block;
padding: 5px;
color: white;
text-align: center;
text-decoration: none;
font-size: 20px;
}
.navbar a:hover {
color: #FFA500
}
.dropdown>a {
position: relative;
padding-right: 10px;
}
.dropdown>a:after {
content: "";
display: block;
border-width: 6px;
border-style: solid;
border-right: 6px solid transparent;
border-color: red transparent transparent;
width: 0;
height: 0;
position: absolute;
right: -14px;
top: 14px;
}
.dropdown-content {
display: none;
position: absolute;
padding: 10px 0;
}
.navbar li .dropdown-content a {
color: black;
display: block;
text-align: left;
font-size: 10px;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 800px) {
.navbar li a {
font-size: 16px;
}
.dropdown>a:after {
border-width: 5px;
border-right: 5px solid transparent;
right: -10px;
top: 12px;
}
}
<div class="navbar">
<ul>
<li>Chade's Bicycle Company</li>
<li class="dropdown">
<a>Buying Tips</a>
<div class="dropdown-content">
Choosing The Correct Bike
Setting A Budget
Test-Ride Before Buying
Choosing The Correct Size
The Essential Accessories
</div>
</li>
<li>Company Calendar</li>
<li>Contact Us </li>
</ul>
</div>