Dropdown Menu Working in Safari but not Chrome - html

Question

I made a dropdown menu and it works perfect in safari, however when I open it up in chrome i can't see the dropdown when I hover over the link. Why is this? I obviously need it to work in both browsers for compatibility reasons.
* {
box-sizing: border-box;
}
h1 {
font-family: 'Arial';
font-size: 6vw;
}
h3 {
font-family: Arial;
font-size: 1.7vw;
text-align: center;
}
p {
font-family: 'Arial';
font-size: 1.7vw;
}
p1 {
font-family: 'Arial';
font-size: 3vw;
}
.header {
background-color: whitesmoke;
padding: 20px;
text-align: center;
}
body {
margin: 0;
background: whitesmoke;
font-family: 'Arial';
font-weight: 300;
font-size: 100%;
}
.main-nav {
display: flex;
}
.main-nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: sticky;
position: -webkit- sticky;
background-color: #DF744A;
top: 0;
width: 100%;
}
.main-nav li {
float: left;
}
.main-nav li a,
.dropdown {
display: block;
padding: 1.2em 2.2em;
text-decoration: none;
color: black;
text-align: center;
font-family: 'Arial';
font-size: 1.2vw;
}
.main-nav li a:hover {
background-color: #FFAE89;
}
li.products {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #DF744A;
min-width: 8vw;
z-index: 1;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
text-align: center;
}
.products:hover .dropdown-content {
display: block;
}
.mainbody {
display: flex;
flex-wrap: wrap;
}
.updates {
flex: 20%;
background-color: #FEDCD2;
}
.section-1 {
flex: 80%;
background-color: whitesmoke;
display: flex;
}
.footer {
padding: 20px;
text-align: center;
background: #bfd8d2;
}
#media screen and (max-width: 600px) {
.main-body {
flex-direction: column;
}
}
.bands {
flex: 50%;
padding: 1em;
}
<div class="header">
<h1>Elle and Belle Design</h1>
<p1>Bespoke Handmade Headbands and Accessories</p>
</div>
<nav class="main-nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li class="products">
Products
<div class="dropdown-content">
Headbands
Earrings
Other
</div>
</li>
<li>Contact Us</li>
</ul>
</nav>
<div class="mainbody">
<div class="updates">
<h3>Updates</h3>
</div>
<div class="section-1">
<div class="bands">
<img src="oliviaband.jpg" alt="Olivia Band" width="330" height="400">
<img src="goldband.jpg" alt="Gold Band" width="330" height="400">
</div>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>

Answer 1

Few points:
.main-nav ul had overflow: hidden which was hiding .dropdown-content which overflows the ul.
li.products was missing position: relative this stops your .dropdown-content position: absolute spanning full browser width.
.dropdown-content I added left: 0 and right: 0 so it uses the width of the position: relative (li.products) parent.
I've updated your code in the below snippet.
* {
box-sizing: border-box;
}
h1 {
font-family: 'Arial';
font-size: 6vw;
}
h3 {
font-family: Arial;
font-size: 1.7vw;
text-align: center;
}
p {
font-family: 'Arial';
font-size: 1.7vw;
}
p1 {
font-family: 'Arial';
font-size: 3vw;
}
.header {
background-color: whitesmoke;
padding: 20px;
text-align: center;
}
body {
margin: 0;
background: whitesmoke;
font-family: 'Arial';
font-weight: 300;
font-size: 100%;
}
.main-nav {
display: flex;
}
/* This had overflow: hidden; */
.main-nav ul {
list-style-type: none;
margin: 0;
padding: 0;
position: sticky;
position: -webkit- sticky;
background-color: #DF744A;
top: 0;
width: 100%;
}
.main-nav li {
float: left;
}
.main-nav li a,
.dropdown {
display: block;
padding: 1.2em 2.2em;
text-decoration: none;
color: black;
text-align: center;
font-family: 'Arial';
font-size: 1.2vw;
}
.main-nav li a:hover {
background-color: #FFAE89;
}
/* Requires position: relative;*/
li.products {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
left: 0;
right: 0;
background-color: #DF744A;
min-width: 8vw;
z-index: 5;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
text-align: center;
}
.products:hover .dropdown-content {
display: block;
}
.mainbody {
display: flex;
flex-wrap: wrap;
}
.updates {
flex: 20%;
background-color: #FEDCD2;
}
.section-1 {
flex: 80%;
background-color: whitesmoke;
display: flex;
}
.footer {
padding: 20px;
text-align: center;
background: #bfd8d2;
}
#media screen and (max-width: 600px) {
.main-body {
flex-direction: column;
}
}
.bands {
flex: 50%;
padding: 1em;
}
<div class="header">
<h1>Elle and Belle Design</h1>
<p1>Bespoke Handmade Headbands and Accessories</p>
</div>
<nav class="main-nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li class="products">
Products
<div class="dropdown-content">
Headbands
Earrings
Other
</div>
</li>
<li>Contact Us</li>
</ul>
</nav>
<div class="mainbody">
<div class="updates">
<h3>Updates</h3>
</div>
<div class="section-1">
<div class="bands">
<img src="oliviaband.jpg" alt="Olivia Band" width="330" height="400">
<img src="goldband.jpg" alt="Gold Band" width="330" height="400">
</div>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>

Answer 2

first issue is that the main-nav is hiding any content that flows outside of it's borders change to:
.main-nav ul {
overflow: visible;
}
Second is that the menu item you want to snap to needs to have position relative set, this tells any children with position absolute what it's reference container should be
li.products {
position: relative;
}
Lastly set the dropdowns position co-ordinates
.products:hover .dropdown-content {
top: 100%;
left: 0;
position: absolute;
}

Answer 3

.main-nav {
display: flex;
position: fixed;
top: 0;
background-color: rgba(0, 0, 0, 0.35);
z-index: 0.9;
height: 5vw;
width: 100%;
}
.main-nav ul {
list-style-type: none;
margin: 0 0 0 20vw;
padding: 0;
overflow: visible;
top: 0;
width: 100%;
height: 5vw;
}
.main-nav ul li {
display: inline-block;
text-align: center;
margin-left: 2vw;
height: 5vw;
}
.main-nav li {
float: left;
height: 5vw;
}
.logoimg {
height: 5vw;
width: auto;
float: left;
position: fixed;
margin-left: 1vw;
z-index: 1;
}
.main-nav li a, .dropdown {
display: block;
padding: 1.2em 2.2em;
text-decoration: none;
color: whitesmoke;
text-align: center;
font-family: 'tenderness';
font-size: 1.5vw;
height: 5vw;
border-bottom: 0.3vw solid transparent;
}
.main-nav li a:after {
display: block;
content: '';
border-bottom: 0.3vw solid whitesmoke;
transform: scaleX(0);
transition: transform 0.3s ease-in-out;
min-width: 6vw;
height: 1.15vw;
}
.main-nav li a:hover:after {
height: 1.15vw;
transform: scaleX(1);
}
li.products {
display: inline-block;
position: relative;
height: 5vw;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(0, 0, 0, 0.35);
min-width: 8vw;
z-index: 1;
left: 0;
right: 0;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
text-align: center;
height: 5vw;
}
.products:hover .dropdown-content {
display: block;
}
This is my new code. I have added the bottom border to each li as you can see when the user hovers. However, I am wanting it to align with the bottom of the navigation bar, rather than directly under the text.
I have just put an estimated height in of 1.2vw so it looks just about right, however, it isn't exact and I was just wondering if there was a more precise and not so makeshift way of doing this?
Thanks
Mary